/* ============================================================
   Cognitus Auctor — Design Tokens
   Brand palette, type, spacing, layout primitives.
   Loaded first; every other stylesheet builds on these vars.
   ============================================================ */

:root{
  /* ---- Brand palette (from ca-logo-final-colors) ---- */
  --ink:        #232625;   /* warm near-black            */
  --deep:       #35403a;   /* deep green-black           */
  --slate:      #4c594f;   /* slate green                */
  --sage:       #a4a69c;   /* sage gray                  */
  --mist:       #bfbfb8;   /* pale gray                  */

  /* ---- Paper surfaces (web-light theme) ---- */
  --paper:        #f1f0e9; /* page background            */
  --paper-raised: #e9e8e0; /* cards / raised blocks      */
  --paper-sunken: #e3e2d9; /* wells / insets             */

  /* ---- Dark panel surfaces ---- */
  --panel:      #181b19;   /* primary dark panel         */
  --panel-2:    #20231f;   /* dark panel, lifted         */
  --panel-lift: #23272c;   /* hero card gradient, near edge */
  --panel-deep: #0f1110;   /* hero card gradient, far edge  */

  /* ---- Accent: SACER periwinkle thread ---- */
  --peri:       #c9d2ff;   /* glow light                 */
  --peri-deep:  #9aa6ee;   /* accent line                */
  --peri-ink:   #5b66b8;   /* accent on paper            */
  --peri-mute:  #8e98c9;   /* periwinkle-tinted panel text, muted */

  /* ---- Text roles ---- */
  --text:       #232625;
  --text-soft:  #46504a;
  --text-mute:  #6f7b72;
  --text-on-dark:      #e9ebe6;
  --text-on-dark-soft: #aab0a6;
  --text-on-panel:     #eef1ff;   /* periwinkle-tinted panel text (dark-card headings) */

  /* ---- Hairlines ---- */
  --rule:         rgba(35,38,37,.14);
  --rule-strong:  rgba(35,38,37,.30);
  --rule-on-dark: rgba(191,191,184,.15);
  --rule-faint:   rgba(35,38,37,.04);

  /* ---- Type families ----
     Metric-matched fallbacks ('Manrope Fallback' / 'IBM Plex Mono Fallback',
     defined in base.css) sit between the web font and system fonts so the
     font swap doesn't shift layout (see base.css for the @font-face rules). */
  --sans: 'Manrope', 'Manrope Fallback', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'IBM Plex Mono', 'IBM Plex Mono Fallback', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  /* ---- Fluid type scale ---- */
  --fs-mega:    clamp(48px, 7vw, 92px);
  --fs-display: clamp(40px, 5.2vw, 68px);
  --fs-h1:      clamp(34px, 4vw, 52px);
  --fs-h2:      clamp(27px, 2.7vw, 38px);
  --fs-h3:      clamp(21px, 1.7vw, 26px);
  --fs-lead:    clamp(18px, 1.45vw, 22px);
  --fs-body:    17px;
  --fs-small:   15px;
  --fs-label:   12.5px;   /* mono eyebrow / micro labels */

  /* ---- Spacing scale ---- */
  --sp-1: 6px;
  --sp-2: 12px;
  --sp-3: 18px;
  --sp-4: 26px;
  --sp-5: 40px;
  --sp-6: 60px;
  --sp-7: 88px;
  --sp-8: 124px;

  /* ---- Layout ---- */
  --maxw:    1240px;
  --maxw-tight: 920px;
  --gutter:  clamp(22px, 5vw, 72px);
  --radius:  10px;
  --radius-sm: 6px;

  /* ---- Motion ---- */
  /* durations */
  --dur-quick:   120ms;   /* micro-feedback: hover, focus */
  --dur-base:    240ms;   /* standard transitions */
  --dur-slow:    420ms;   /* larger reveals, hero */
  --dur-ambient:   8s;    /* looping/ambient background motion */

  /* easings */
  --ease-standard:   cubic-bezier(0.2, 0, 0, 1);    /* most enter/move */
  --ease-emphasized: cubic-bezier(0.3, 0, 0, 1);    /* hero, key moments */
  --ease-exit:       cubic-bezier(0.4, 0, 1, 1);    /* leaving the screen */

  /* travel distances for enter/reveal */
  --move-sm: 8px;  --move-md: 16px;  --move-lg: 32px;
}