/* ============================================================
   Studio Ardium — DESIGN TOKENS  (single source of truth)
   Every colour, font, size, space and motion value lives here as
   a CSS custom property. Build new elements from var(--ard-*) only —
   never hard-code a hex or magic number again.
   Load order:  tokens.css → components.css → styles.css
   ============================================================ */

:root{
  /* ---- Brand colours ---------------------------------------- */
  --ard-ink:#0A0A0A;          /* primary text · inverted surfaces */
  --ard-cobalt:#1E32FF;       /* PRIMARY · links · the mark       */
  --ard-signal:#FF4A1C;       /* secondary · rare emphasis only   */
  --ard-paper:#FFFFFF;        /* pure white surface               */
  --ard-canvas:#FCFCFA;       /* default page background          */
  --ard-bone:#F4F4F2;         /* secondary / panel surface        */

  /* ---- Text shades ------------------------------------------ */
  --ard-text:#0A0A0A;         /* body text on light               */
  --ard-text-soft:#3C3C3C;    /* long-form paragraph copy         */
  --ard-text-mute:#5A5A5A;    /* captions · secondary copy        */
  --ard-meta:#9A9A9A;         /* mono labels · metadata · grey    */
  --ard-meta-soft:#B4B4B2;    /* placeholders · faint meta        */

  /* ---- Lines & fields --------------------------------------- */
  --ard-line:#E7E6E1;         /* hairline rules · dividers        */
  --ard-line-soft:#ECECEC;    /* header border · faint dividers   */
  --ard-field:#D8D8D6;        /* input underlines                 */

  /* ---- Dark surface (footer / inverted spreads) ------------- */
  --ard-dark:#0A0A0A;
  --ard-dark-text:#F4F4F4;
  --ard-dark-mute:#B5B5B5;
  --ard-dark-meta:#8A8A8A;
  --ard-dark-line:#242424;

  /* ---- Type families ---------------------------------------- */
  --ard-font-display:'Archivo',sans-serif;        /* display + UI, 400–900 */
  --ard-font-serif:'Instrument Serif',serif;      /* italic accent, sparing */
  --ard-font-mono:'JetBrains Mono',monospace;     /* labels, metadata       */

  /* ---- Type scale (fluid display sizes) --------------------- */
  --ard-fs-hero:clamp(54px,9vw,128px);   /* page-opening headline */
  --ard-fs-h1:clamp(40px,6.6vw,96px);
  --ard-fs-h2:clamp(32px,4.6vw,64px);
  --ard-fs-h3:clamp(21px,3vw,40px);
  --ard-fs-lead:clamp(17px,1.5vw,22px);  /* intro paragraph       */
  --ard-fs-body:15.5px;                  /* default body copy     */
  --ard-fs-small:13.5px;
  --ard-fs-label:11px;                   /* mono eyebrow / label  */
  --ard-fs-meta:10px;                    /* mono micro-caption    */

  /* ---- Weights ---------------------------------------------- */
  --ard-fw-bold:800;     /* display headlines */
  --ard-fw-semi:600;
  --ard-fw-med:500;

  /* ---- Tracking (letter-spacing) ---------------------------- */
  --ard-track-tight:-.035em;   /* big display headlines */
  --ard-track-label:.08em;     /* mono labels           */
  --ard-track-wide:.16em;      /* eyebrows / loaders    */

  /* ---- Spacing scale (8-pt-ish) ----------------------------- */
  --ard-1:4px;   --ard-2:8px;   --ard-3:12px;  --ard-4:16px;
  --ard-5:24px;  --ard-6:32px;  --ard-7:48px;  --ard-8:60px;
  --ard-9:88px;  --ard-10:104px;

  /* ---- Layout ----------------------------------------------- */
  --ard-maxw:1280px;        /* content container width          */
  --ard-gutter:32px;        /* page side padding (desktop)      */
  --ard-gutter-lg:56px;     /* wide case-study gutter           */
  --ard-gutter-mobile:22px;
  --ard-section-y:88px;     /* vertical section rhythm          */
  --ard-header-h:62px;      /* fixed header offset              */

  /* ---- Motion ----------------------------------------------- */
  --ard-ease:cubic-bezier(.16,1,.3,1);  /* THE signature ease    */
  --ard-dur-fast:.25s;
  --ard-dur:.45s;
  --ard-dur-slow:.8s;

  /* ---- Effects ---------------------------------------------- */
  --ard-radius:0px;                                      /* sharp corners — the brand is never rounded */
  --ard-shadow-cobalt:0 24px 50px -28px rgba(30,50,255,.5);
  --ard-grain:url("../assets/grain.png");
  --ard-z-grain:9998;
  --ard-z-cursor:9999;
  --ard-z-loader:10001;
}