/* ============================================================
   BRAMS — Design tokens
   Single source of truth for color, type, motion, layout.
   ============================================================ */

:root {
  /* --- Brand ----------------------------------------------- */
  --brams-blue:        #3B88CE;
  --brams-blue-bright: #4A9BE8;
  --brams-blue-deep:   #1E5A94;

  /* --- Neutrals -------------------------------------------- */
  --black:    #060708;
  --graphite: #101316;
  --steel-700:#22262A;
  --steel-500:#5A5E62;
  --steel-300:#9CA0A4;
  --aluminium:#C8CCD0;
  --off-white:#F4F5F6;

  /* --- Surfaces (resolve via theme) ------------------------ */
  --bg:      var(--black);
  --surface: var(--graphite);
  --border:  var(--steel-700);
  --text:    var(--off-white);
  --text-muted: var(--steel-300);
  --accent:  var(--brams-blue);

  /* --- Typography ----------------------------------------- */
  --font-display: "Archivo", system-ui, sans-serif;
  --font-body:    "Inter", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, monospace;

  --fs-micro:  0.6875rem;   /* 11px — mono labels */
  --fs-mono:   0.75rem;     /* 12px — spec accents */
  --fs-small:  0.875rem;    /* 14px */
  --fs-body:   clamp(1rem, 0.95rem + 0.2vw, 1.0625rem);
  --fs-lead:   clamp(1.125rem, 1rem + 0.6vw, 1.375rem);
  --fs-h6:     clamp(0.875rem, 0.825rem + 0.25vw, 1rem);
  --fs-h5:     clamp(1rem, 0.95rem + 0.3vw, 1.25rem);
  --fs-h4:     clamp(1.25rem, 1.1rem + 0.75vw, 1.75rem);
  --fs-h3:     clamp(1.75rem, 1.4rem + 1.75vw, 2.75rem);
  --fs-h2:     clamp(2.25rem, 1.5rem + 3.5vw, 4.5rem);
  --fs-h1:     clamp(2.5rem, 1.5rem + 5vw, 6.5rem);
  --fs-display:clamp(2.5rem, 1rem + 7vw, 8rem);

  --lh-tight: 1.02;
  --lh-snug:  1.15;
  --lh-base:  1.55;

  --tracking-tight: -0.02em;
  --tracking-mono:  0.08em;
  --tracking-label: 0.18em;

  /* --- Motion --------------------------------------------- */
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-inout: cubic-bezier(0.76, 0, 0.24, 1);
  --ease-cinematic: cubic-bezier(0.7, 0, 0.2, 1);

  --dur-fast: 0.4s;
  --dur:      0.8s;
  --dur-slow: 1.2s;

  /* --- Layout --------------------------------------------- */
  --gutter:    clamp(1.25rem, 0.75rem + 2vw, 2.5rem);
  --max-w:     1640px;
  --nav-h:     78px;
  /* Tightened in round 3. Old token (--section-y) preserved for any consumer
     that still uses it, but new sections + per-section overrides should use
     --section-pad to enforce a consistent vertical rhythm. */
  --section-y:   clamp(3.5rem, 2.5rem + 4.5vw, 7rem);
  --section-pad: clamp(3.5rem, 2.5rem + 4.5vw, 7rem);

  /* --- Z-index ladder (strict) ----------------------------
     Numbered with wide gaps so we never collide later.
     Cursor must always sit above EVERY interactive surface. */
  --z-nav:                60000;
  --z-back-to-top:        70000;
  --z-assistant-launcher: 70000;
  --z-assistant-panel:    80000;
  --z-drawer:             85000;
  --z-transition:         90000;
  --z-loader:             95000;
  --z-cursor:            100000;
  /* Legacy aliases — kept so any older rule still resolves. */
  --z-modal: var(--z-assistant-panel);
}

/* --- Theme: LIGHT (interleaved sections) ------------------ */
[data-theme="light"] {
  --bg:        var(--off-white);
  --surface:   #FFFFFF;
  --border:    rgba(6, 7, 8, 0.10);
  --text:      var(--black);
  --text-muted:#4A4E52;
}