/* ============================================================
   ANTSFACTORY — TOKENS
   The only file that holds a literal colour, radius, font or
   duration. Every component in site.css consumes these.

   Design language: "midnight gallery" — near-black canvas,
   whisper-weight serif display, mono micro-labels, and a small
   set of saturated colours used ONLY as full-bleed category
   tiles. White-on-black is the single primary action.
   ============================================================ */

:root {
  /* Tells the browser this page already ships a dark treatment.
     Without it, Chrome's auto-dark repaints the Silver inverted
     card and every light tile as if they were an oversight.    */
  color-scheme: dark;

  /* ---------- 1. COLOUR ------------------------------------
     Five values define the palette. Everything else derives.  */
  --bg:        #0f1011;          /* Obsidian — page canvas     */
  --bg-2:      #090a0b;          /* Abyss — alternating bands  */
  --ink-rgb:   255 255 255;      /* text channel (rgb triplet) */
  --accent:    #ffffff;          /* the only primary action    */
  --accent-ink:#000000;          /* text on accent fills       */

  /* derived — don't edit, they follow --ink-rgb */
  --ink:         rgb(var(--ink-rgb));
  --ink-85:      rgb(var(--ink-rgb) / .96);   /* Cloud  #f5f5f7 */
  --ink-dim:     rgb(var(--ink-rgb) / .62);   /* Ash    #9f9fa0 */
  --ink-faint:   rgb(var(--ink-rgb) / .42);   /* Fog    #6a6b6b */
  --ink-ghost:   rgb(var(--ink-rgb) / .22);
  --line:        rgb(var(--ink-rgb) / .10);
  --line-strong: rgb(var(--ink-rgb) / .28);
  --surface:     rgb(var(--ink-rgb) / .06);
  --surface-hi:  rgb(var(--ink-rgb) / .12);
  --accent-soft: rgb(var(--ink-rgb) / .16);
  --accent-glow: rgb(var(--ink-rgb) / .10);

  /* ---------- 1b. SURFACE STEPS ----------------------------
     Elevation is a colour step, never a shadow.               */
  --surface-graphite: #2e2e2e;   /* elevated product modules   */
  --surface-steel:    #3f4041;   /* hover / pressed on dark    */
  --surface-silver:   #cacaca;   /* inverted light card        */
  --void:             #000000;   /* input wells, button text   */

  /* ---------- 1c. CHROMATIC TILES --------------------------
     Reserved for full-bleed category tiles only. Never as an
     inline accent, a border, or on text under 18px.           */
  --tile-iris:       #847dff;
  --tile-cyan:       #00b3dd;
  --tile-pale-iris:  #d1c9ff;
  --tile-deep-iris:  #4b49aa;
  --tile-orchid:     #dd90d8;
  --tile-periwinkle: #90b8f0;

  /* ---------- 2. TYPE --------------------------------------
     Three voices: serif display for emotion, sans for UI,
     mono for data. Never mix the jobs.                        */
  --font-display: "Playfair Display", Georgia, serif;
  --font-body:    "Inter", system-ui, sans-serif;
  --font-mono:    "Roboto Mono", ui-monospace, monospace;

  --display-weight:   400;       /* never bolder — the whisper */
  --display-tracking: -0.021em;
  --display-leading:  0.9;
  --body-weight:      400;
  --label-tracking:   0.182em;

  --type-scale: 1;

  --fs-hero:  calc(clamp(2.9rem, .9rem + 7.4vw, 6rem)    * var(--type-scale));
  --fs-h2:    calc(clamp(2.3rem, 1.1rem + 4.4vw, 4.4rem) * var(--type-scale));
  --fs-h3:    calc(clamp(1.6rem, 1.1rem + 1.6vw, 2.375rem) * var(--type-scale)); /* 38px */
  --fs-h4:    clamp(1.1rem, .98rem + .45vw, 1.375rem);
  --fs-lead:  clamp(1.02rem, .95rem + .35vw, 1.125rem);   /* 18px */
  --fs-body:  1rem;
  --fs-sm:    .875rem;
  --fs-label: .6875rem;                                    /* 11px */

  /* ---------- 3. SHAPE ------------------------------------- */
  --radius:      30px;           /* feature + category tiles   */
  --radius-sm:   16px;           /* cards, stat blocks, figures*/
  --radius-lg:   30px;
  --radius-pill: 8px;            /* buttons — see data-btn     */
  --border-w:    1px;
  --btn-py:      .75rem;         /* 12px                       */
  --btn-px:      1.125rem;       /* 18px                       */

  /* ---------- 4. SPACE ------------------------------------- */
  --density:   1;
  --section-y: calc(clamp(4.5rem, 2.5rem + 8vw, 8.75rem) * var(--density));
  --gutter:    clamp(1.25rem, 4vw, 3.5rem);
  --maxw:      1200px;
  --maxw-text: 46ch;
  --grid-gap:  clamp(.75rem, 1.2vw, .9375rem);   /* 12–15px    */
  --grid-cols: 3;
  --card-pad:  clamp(1.5rem, 3vw, 2rem);         /* 32px       */

  /* ---------- 5. EFFECT / MOTION ---------------------------
     Restrained: 0.2s on state, long slow reveals, nothing
     springy. The gallery is flat — no shadows, no glow.       */
  --grain:     0;
  --vignette:  0;
  --motion:    1;
  --dur:       calc(.2s * var(--motion));   /* state changes   */
  --dur-fast:  calc(.2s * var(--motion));
  --dur-slow:  calc(2.2s * var(--motion));  /* atmospheric     */
  --ease:      cubic-bezier(.455, .03, .515, .955);
  --ease-expo: cubic-bezier(.16, 1, .3, 1);
  --stagger:   calc(34ms * var(--motion));
  --blur-nav:  24px;
}

/* ============================================================
   VARIANT AXES — data-* attributes on <html>
   ============================================================ */

/* --- Button shape ---------------------------------------- */
:root[data-btn="soft"]   { --radius-pill: 8px;   --btn-py: .75rem;  --btn-px: 1.125rem; }
:root[data-btn="pill"]   { --radius-pill: 999px; --btn-py: .75rem;  --btn-px: 1.35rem;  }
:root[data-btn="square"] { --radius-pill: 0px;   --btn-py: .8rem;   --btn-px: 1.2rem;   }

/* --- Motion levels --------------------------------------- */
:root[data-motion="subtle"] { --motion: .55; }
:root[data-motion="none"]   { --motion: 0; --stagger: 0ms; }

@media (prefers-reduced-motion: reduce) {
  :root { --motion: 0; --stagger: 0ms; }
}

/* ============================================================
   GRADIENTS — exactly two, both structural, never decorative
   ============================================================ */
:root {
  /* machined chrome, for device frames and elevated chrome */
  --grad-chrome: linear-gradient(135deg, rgb(43,43,44), rgb(19,19,19));
  /* horizon behind the hero photograph */
  --grad-sky: linear-gradient(
    rgb(15,16,17) 0%,
    rgb(19,29,39) 18%,
    rgb(26,71,136) 37%,
    rgb(64,138,193) 69%,
    rgb(64,138,193) 102%);
}