/* GENERATED — do not edit.
   Source: outputs/vjvarada-site/design-system/system/variables.css
   Regenerate: python outputs/vjvarada-site/design-system/sync.py
*/
/* Vijay Raghav Varada — design system tokens
   ---------------------------------------------------------------------------
   Source of truth. `sync.py` copies this file to
   outputs/vjvarada-site/site/assets/brand.css, which is the only stylesheet
   allowed to declare a raw colour. Every other rule references a var().

   Extracted from concepts/machine (the chosen direction, DECISION.md
   2026-08-31): deep-space dark ground, one signal-orange accent, 4px radius,
   Archivo with IBM Plex Mono for technical labels.

   Contrast, measured against --bg unless stated (WCAG 2.1, sRGB):
     --ink        on --bg      17.87 : 1   AAA
     --ink-muted  on --bg       9.09 : 1   AAA
     --ink-faint  on --bg       5.82 : 1   AA
     --ink-faint  on --surface  5.42 : 1   AA   (the worst pair on the site)
     --accent     on --bg       5.77 : 1   AA
     --accent     on --surface  5.37 : 1   AA
     --on-accent  on --accent   5.77 : 1   AA   (the primary button)
   Any new colour has to clear 4.5:1 for body text or it does not go in.
*/

:root{
  /* ---- ground --------------------------------------------------------- */
  --bg:           #0a0b0d;   /* page. off-black, never #000 */
  --bg-raised:    #0e1013;   /* alternating bands */
  --surface:      #121519;   /* cards, tiles, panels */
  --surface-hi:   #171b21;   /* hover, nested surface */

  /* ---- hairlines ------------------------------------------------------ */
  --line:         #1d2126;
  --line-strong:  #282e35;

  /* ---- ink ------------------------------------------------------------ */
  --ink:          #f2f4f7;
  --ink-muted:    #a9b1bb;
  --ink-faint:    #828d98;

  /* ---- accent. exactly one, used on every band ------------------------ */
  --accent:       #ef5a24;
  --accent-hi:    #ff7442;
  --on-accent:    #0a0b0d;

  /* ---- type ----------------------------------------------------------- */
  --font-display: Archivo, "Segoe UI", system-ui, -apple-system,
                  "Helvetica Neue", Arial, sans-serif;
  --font-body:    Archivo, "Segoe UI", system-ui, -apple-system,
                  "Helvetica Neue", Arial, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, "Cascadia Mono", "SF Mono",
                  Menlo, Consolas, monospace;

  --step--1: clamp(12.5px, 0.15vw + 12px, 13.5px);
  --step-0:  clamp(15px,   0.30vw + 14px, 16.5px);
  --step-1:  clamp(16.5px, 0.50vw + 15px, 19px);
  --step-2:  clamp(21px,   1.20vw + 18px, 27px);
  --step-3:  clamp(26px,   2.40vw + 20px, 40px);
  --step-4:  clamp(30px,   4.00vw + 20px, 52px);
  --step-5:  clamp(38px,   7.00vw + 18px, 76px);

  --track-display: -0.03em;
  --track-tight:   -0.02em;
  --track-mono:     0.16em;

  --leading-display: 1.02;
  --leading-body:    1.6;

  /* ---- space ---------------------------------------------------------- */
  --gutter:  clamp(20px, 5vw, 72px);
  --measure: 1240px;
  --band-y:  clamp(72px, 11vw, 128px);
  --stack:   clamp(14px, 1.4vw, 20px);

  /* ---- shape ---------------------------------------------------------- */
  --radius: 4px;
  --nav-h:  64px;

  /* ---- motion --------------------------------------------------------- */
  --ease: cubic-bezier(.2,.6,.2,1);
  --dur:  .45s;
}