/* ======================================================
   BRAND TOKENS
   Single source of truth for colors & fonts
   ====================================================== */

:root {
  /* ---------- Brand Colors ---------- */

  /* Primary blues (from Brand Book) */
  --brand-blue-dark: rgb(50, 80, 141);      /* Pantone 7685 C */
  --brand-blue: rgb(36, 143, 207);          /* Pantone 2925 C */
  --brand-blue-light: rgba(36, 143, 207, .3);

  /* Brand red */
  --brand-red: rgb(227, 6, 19);              /* Pantone 485 C */

  /* Greys */
  --brand-grey-dark: rgb(151, 153, 154);     /* Cool Gray 7 */
  --brand-grey-light: rgb(212, 213, 215);    /* Pantone 427 C */

  /* Backgrounds */
  --brand-bg-main: #0f1113;
  --brand-bg-panel: #1a1d20;
  --brand-bg-header: var(--brand-blue-dark);

  /* ---------- Typography ---------- */

  --font-heading: "Montserrat", sans-serif;
  --font-body: "Nunito Sans", sans-serif;

  --font-weight-heading: 800;
  --font-weight-body: 400;

  /* ---------- UI ---------- */

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;

  --transition-fast: 0.15s ease;

    --btn-bg: var(--brand-blue);
  --btn-bg-hover: color-mix(in srgb, var(--brand-blue) 85%, black);
  --btn-text: #fff;

  --btn-radius: 12px;                 /* or var(--radius-md) */
  --btn-pad-y: 12px;
  --btn-pad-x: 22px;

  --btn-font: var(--font-heading);
  --btn-weight: 800;
  --btn-letter-spacing: 0.08em;

  --btn-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
}