/* ==========================================================================
   tokens.css — Design system primitives
   The single source of truth for the visual language. Change a value here and
   it propagates everywhere. Nothing in this file styles an element directly;
   it only declares custom properties (design tokens).

   Units: lengths are in rem (relative to the root font-size, so the whole site
   scales with the user's browser setting). The deliberate exceptions are 1px
   hairline rules — sub-pixel borders blur, so crisp dividers stay in px.
   ========================================================================== */

:root {
  /* ---- Color: palette -------------------------------------------------- */
  --c-paper:          #F5F5F0; /* page + card background                    */
  --c-ink:            #111111; /* primary text, headings, borders           */
  --c-signal:         #E8200A; /* accent fills: CTAs, nodes, borders, big type */
  --c-signal-dark:    #C41A08; /* accent hover/pressed                      */
  --c-white:          #FFFFFF;
  /* The vivid signal red is only 4.1:1 on each ground, so small RED TEXT uses
     a tuned variant per background to clear WCAG AA (fills are unaffected). */
  --c-signal-ink:     #C41A08; /* small red text on paper — 5.5:1           */
  --c-signal-bright:  #FF4326; /* small red text on dark  — 5.4:1           */

  /* ---- Color: text scale ----------------------------------------------
     Tuned for WCAG AA on paper (#F5F5F0): every value below clears 4.5:1 for
     body copy, except --c-text-subtle which is only used at large/meta sizes. */
  --c-text:           #222222; /* body copy            — 13.7:1             */
  --c-text-muted:     #595550; /* descriptions         —  6.4:1             */
  --c-text-subtle:    #6B6660; /* meta / secondary     —  4.8:1             */
  --c-text-bullet:    #333333; /* list item copy       — 10.6:1             */
  --c-placeholder:    #6F6A62; /* eyebrow / portrait   —  4.6:1             */

  /* ---- Color: lines --------------------------------------------------- */
  --c-rule:           #C9C3B8; /* section divider on paper                  */
  --c-rule-soft:      #D5CFC5; /* list separators                          */
  --c-rule-strong:    #C2BCB1; /* timeline spine                           */
  --c-border-nav:     #DCD7CD; /* header underline                         */
  --c-portrait-edge:  #D8D3C9;

  /* ---- Color: dark (contact) section ---------------------------------- */
  --c-dark-bg:        #111111;
  --c-dark-text:      #F4F1EB;
  --c-dark-input:     #EDEAE4;
  --c-dark-rule:      #34302A;
  --c-dark-rule-2:    #2A2620;
  --c-dark-rule-3:    #39342E;
  --c-dark-field:     #4A443C;
  --c-dark-label:     #9A9388; /* meta on dark — 4.7:1 on #111             */
  --c-dark-foot:      #8A847A; /* footer meta on dark — 4.5:1              */
  --c-dark-placeholder:#8C857B;

  /* ---- Typography: families -------------------------------------------
     Two grotesque families only. Archivo (one variable file, weight + width
     axes) does all display and body work; Space Mono carries labels/meta.
     --font-display uses Archivo's Expanded width via font-stretch in CSS. */
  --font-display: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-grotesk: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-sans:    var(--font-grotesk); /* legacy alias */
  --font-mono:    "Space Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* ---- Typography: fluid display scale -------------------------------- */
  --fs-hero:        clamp(3.5rem, 11.5vw, 9.875rem);
  --fs-display:     clamp(3rem, 7.5vw, 5.625rem);  /* big section headings  */
  --fs-h2:          clamp(2.75rem, 5.5vw, 3.75rem); /* standard heading     */
  --fs-h2-sm:       clamp(2.5rem, 4.6vw, 3.375rem); /* skills heading       */
  --fs-h2-contact:  clamp(3rem, 7vw, 5rem);
  --fs-quote:       clamp(1.625rem, 2.5vw, 2rem);
  --fs-subtitle:    clamp(0.8125rem, 1.7vw, 1.1875rem);

  /* ---- Typography: fixed steps ---------------------------------------- */
  --fs-role:        2rem;     /* cv entry / experience role title          */
  --fs-skill-title: 1.375rem;
  --fs-lead:        1.3125rem;/* hero paragraph                            */
  --fs-body:        1.125rem;
  --fs-bullet:      0.9375rem;
  --fs-desc:        0.875rem;
  --fs-label:       0.6875rem;/* mono section labels                       */
  --fs-meta:        0.75rem;
  --fs-btn:         0.875rem;

  /* ---- Typography: weights & spacing ---------------------------------- */
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold:600;
  --fw-bold:    700;
  --fw-black:   900;

  --ls-tight:   -0.012em;
  --ls-hero:    -0.02em;  /* tighter still for the Expanded display wordmark */
  --ls-label:    0.26em;
  --ls-eyebrow:  0.34em;
  --ls-mono:     0.16em;
  --ls-nav:      0.22em;
  --ls-logo:     0.28em;

  --lh-tight: 0.9;
  --lh-snug:  1.16;
  --lh-body:  1.62;
  --lh-list:  1.55;

  /* ---- Spacing scale (0.25rem base) ----------------------------------- */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.375rem;
  --space-6:  1.875rem;
  --space-7:  2.875rem;
  --space-8:  3.75rem;
  --space-9:  4.875rem;
  --space-section: 5.25rem;  /* vertical rhythm between sections           */

  /* ---- Layout --------------------------------------------------------- */
  --container:    96rem;
  --gutter:       2rem;
  --gutter-sm:    1.125rem;
  --grid-cols:    12;        /* the layout field — every region aligns here */
  --header-h:     4.1875rem;
  --measure:      35rem;     /* readable paragraph width (~62ch)            */

  /* ---- Effects -------------------------------------------------------- */
  --blur-nav: 10px;
  --tap-min:  2.75rem;       /* minimum touch target                       */
  --transition: 0.2s ease;
}