:root {

  /* ── Brand colours ──────────────────────────────────────────── */
  --color-brand-primary:    #004FAA;   /* Main brand blue            */
  --color-brand-dark:       #003776;   /* Dark brand blue            */
  --color-brand-accent:     #B50407;   /* Brand red (CTA / hot tags) */

  --color-brand-gradient: conic-gradient(
    from 90deg,
    rgb(81,0,255)   0%,
    rgb(87,10,255)  2.5%,
    rgb(107,39,255) 10%,
    rgb(133,77,255) 20%,
    rgb(72,99,249)  35%,
    rgb(11,122,244) 50%,
    rgb(28,91,247)  62.5%,
    rgb(46,61,249)  75%,
    rgb(63,30,252)  87.5%,
    rgb(81,0,255)   100%
  );

  /* ── Neutral scale (Gray-1 / Gray-2 / Gray-3 per Momento §2) ── */
  --color-text-primary:     #000000;   /* Gray-1 — default text      */
  --color-text-secondary:   #434343;   /* Gray-2 — secondary text    */
  --color-text-disabled:    #8C8C8C;   /* Gray-2 muted / disabled    */
  --color-text-muted:       #6A6A6A;   /* muted labels               */
  --color-surface-default:  #FFFFFF;   /* default surface            */
  --color-surface-subtle:   #F7F7F7;   /* Gray-3 — disabled bg       */
  --color-surface-info-bg:  #D8EAFF;   /* light blue info surface    */
  --color-border:           #E0E0E0;   /* standard border            */
  --color-border-subtle:    #AAAAAA;   /* subtle / inactive border   */

  /* ── Semantic colours ──────────────────────────────────────── */
  --color-error:   #E22721;
  --color-success: #0D8728;
  --color-info:    #004FAA;
  --color-warning: #FFD159;

  /* ── Typography — Momento §3 ──────────────────────────────── */
  --font-heading: 'Inter', sans-serif;
  --font-body:    'Helvetica Neue', Helvetica, Arial, sans-serif;

  --fw-normal:  400;
  --fw-semibold: 600;
  --fw-bold:    700;
  --fw-xbold:   800;

  /* Heading scale (Inter) */
  --text-display-lg-size:  32px;  --text-display-lg-lh:  40px;
  --text-heading-xl-size:  28px;  --text-heading-xl-lh:  32px;
  --text-heading-lg-size:  26px;  --text-heading-lg-lh:  32px;
  --text-heading-md-size:  24px;  --text-heading-md-lh:  32px;
  --text-heading-sm-size:  20px;  --text-heading-sm-lh:  24px;
  --text-heading-xsm-size: 18px;  --text-heading-xsm-lh: 24px;

  /* Body scale (Helvetica Neue) */
  --text-action-md-size: 16px;  --text-action-md-lh: 24px;
  --text-body-md-size:   16px;  --text-body-md-lh:   24px;
  --text-link-md-size:   16px;  --text-link-md-lh:   24px;
  --text-label-md-size:  14px;  --text-label-md-lh:  18px;
  --text-xs-size:        12px;  --text-xs-lh:        18px;

  /* ── Spacing — 8 px base grid (Momento §4) ─────────────────── */
  --space-1:  8px;
  --space-2:  16px;
  --space-3:  24px;
  --space-4:  32px;
  --space-5:  40px;
  --space-6:  48px;
  --space-10: 80px;   /* desktop container horizontal gutter */

  /* ── Border radius ─────────────────────────────────────────── */
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-full: 9999px;

  /* ── Elevation / shadows ───────────────────────────────────── */
  --elevation-sm: 0 1px 4px rgba(0, 0, 0, 0.15);
  --elevation-md: 0 4px 12px rgba(0, 0, 0, 0.12);
  --elevation-lg: 0 4px 20px rgba(0, 0, 0, 0.10);

  /* ── Component-level aliases (convenience) ─────────────────── */
  --color-topbar-bg:        var(--color-brand-primary);
  --color-input-bg:         var(--color-surface-default);
  --color-input-bg-focus:   var(--color-surface-default);
  --color-input-bg-default: #C3D4E9;   /* unfocused search bar tint  */
  --color-drawer-bg:        var(--color-surface-default);
  --color-badge-hot-bg:     var(--color-brand-accent);
  --color-badge-hot-text:   var(--color-surface-default);
  --color-badge-clear-bg:   var(--color-warning);
  --color-badge-clear-text: var(--color-text-primary);
}

/* ================================================================
   DARK MODE — add overrides here; no component file needs to change
   ================================================================ */
@media (prefers-color-scheme: dark) {
  :root {
    /* Uncomment and tune when dark mode is approved:
    --color-text-primary:    #FFFFFF;
    --color-text-secondary:  #AAAAAA;
    --color-surface-default: #121212;
    --color-surface-subtle:  #1E1E1E;
    --color-border:          #333333;
    --color-border-subtle:   #555555;
    */
  }
}