/* ============================================================
   TECH QUARTERS · CANONICAL DESIGN TOKENS
   Single source of truth for every page. If a page in /pages
   disagrees with this file, THIS FILE WINS (see DESIGN_SYSTEM.md
   consistency matrix for the known drift per page).
   Source of values: techquarters-consulting.html (v2 locked
   system) + TQ_Brand_Guidelines_v3.html.
   ============================================================ */

:root{
  /* ---------- canvas ---------- */
  --canvas:#F4F6FA;        /* Day canvas, the primary page background */
  --canvas-alt:#FFFFFF;    /* alternating white band on Day */
  --night:#0B0E15;         /* Night canvas · nav, footer base */
  --s1:#0E121B;            /* Surface 1 · dark island background */
  --s2:#141A27;            /* Surface 2 · nested card inside an island */
  --s3:#1A2231;            /* Surface 3 · deepest nesting (chips, calendar tiles) */
  --cb:#202A3B;            /* card border on dark surfaces */

  /* ---------- text, Day ---------- */
  --text:#0C1220;          /* near black, headings and strong body */
  --muted:#414D63;         /* body copy */
  --faint:#7C879C;         /* captions, labels at rest */
  --border:#DFE5EF;        /* hairlines and card borders on Day */

  /* ---------- text, Night / islands ---------- */
  --dtext:#E7EAF2;         /* primary text on dark */
  --dmuted:#8D97AD;        /* body on dark */
  --dfaint:#5A6479;        /* captions on dark */

  /* ---------- the five layer colors · layers label layers ---------- */
  --amber:#F0A830;         /* Build layer · Business Software branch */
  --steel:#5B9BD5;         /* Pipeline layer · Lead Generation branch */
  --indigo:#8B7CF0;        /* Automation layer · Email & Follow Up branch */
  --teal:#2FD4B8;          /* AI layer · AI Agents branch */
  --coral:#FB7185;         /* Management layer · Marketing branch */

  /* deep variants, used on white where the base color lacks contrast */
  --amber-deep:#C77E1E;
  --steel-deep:#3E7CC0;
  --indigo-deep:#6F5AE0;
  --teal-deep:#2AA88F;
  --coral-deep:#E14F66;

  /* ---------- action ---------- */
  --action:#00E572;        /* green · CTAs, live status, success ONLY */
  --action-ink:#052611;    /* text color on green buttons */

  /* ---------- the one gradient ---------- */
  /* permitted on exactly ONE phrase per page (the hero highlight)
     and on the route fill. nowhere else. */
  --g-hero:linear-gradient(95deg,#7C5CFF 8%,#3D8BFF 92%);
  --g-logo:linear-gradient(135deg,#7C5CFF,#3D8BFF); /* TQ logo tile only */

  /* ---------- type ---------- */
  --display:'Sora',sans-serif;   /* weights 600/700/800 · headings + big numbers */
  --body:'Inter',sans-serif;     /* weights 400/500/600/700 · everything else */
  /* NO MONO FONT. JetBrains Mono was removed by owner decision 2026-08.
     Numbers use Sora. Labels and small data use Inter 500/600. */

  /* type scale · exactly these sizes, nothing between */
  --fs-label:11px;         /* small caps labels, letter-spacing .10 to .12em, weight 700 */
  --fs-small:13px;         /* card body, captions, ledger rows */
  --fs-body:15px;          /* default body */
  --fs-lede:17px;          /* section ledes */
  --fs-h3:18px;            /* card titles (doors 21px is the one sanctioned exception) */
  --fs-h2:clamp(26px,4.4vw,40px);
  --fs-h1:clamp(34px,6.4vw,56px);
  --fs-num:26px;           /* stat numbers, Sora 700 (hero film big numbers may clamp larger) */

  /* ---------- spacing · 8px scale, nothing between ---------- */
  --sp-1:8px;  --sp-2:12px; --sp-3:16px; --sp-4:24px;
  --sp-5:32px; --sp-6:48px; --sp-7:64px; --sp-8:96px;
  --gap-cards:16px;            /* EVERY card grid */
  --pad-card:32px;             /* 24px under 760px */
  --pad-island:48px;           /* 28px under 760px */
  --sect-y:96px;               /* 64px under 760px */
  --wrap-max:1120px;           /* content column · 20px side gutter mobile, 32px desktop */

  /* ---------- radius ---------- */
  --r-sm:14px;             /* chips, nested rows, small tiles */
  --r-card:18px;           /* cards (16px under 760px) */
  --r-island:22px;         /* dark islands (18px under 760px) */
  --r-pill:999px;          /* nav pill, buttons' floating variants, tabs */

  /* ---------- shadows · two layers, always together ---------- */
  --lift:0 18px 44px rgba(12,18,32,.13),0 3px 10px rgba(12,18,32,.08);
  --lift-dark:0 24px 54px rgba(12,18,32,.2),0 4px 12px rgba(12,18,32,.12); /* dark card hover */
  --glow-action:0 10px 26px rgba(0,229,114,.28),0 2px 8px rgba(0,229,114,.18); /* green button */
  --glow-fab:0 14px 34px rgba(0,229,114,.35),0 3px 10px rgba(0,229,114,.25);   /* floating CTA */
  /* premium layered card shadows (Kaan 24 Oct): tight contact + mid + wide soft ambient, never muddy.
     /office-hand/ keeps its own --sh-* (defined in its v3.css), so this retune does not touch it. */
  --sh-1:0 1px 2px rgba(12,18,32,.05),0 3px 8px rgba(12,18,32,.05),0 10px 24px rgba(12,18,32,.05);
  --sh-2:0 1px 2px rgba(12,18,32,.05),0 6px 14px rgba(12,18,32,.06),0 22px 48px rgba(12,18,32,.09);
  --sh-3:0 2px 4px rgba(12,18,32,.06),0 12px 26px rgba(12,18,32,.09),0 40px 80px rgba(12,18,32,.13);
  /* dark cards on the light page: a touch deeper and cooler so they lift off it */
  --sh-dark:0 1px 2px rgba(8,12,28,.20),0 10px 22px rgba(16,24,56,.18),0 30px 64px rgba(22,32,80,.24);
  --sh-dark-hover:0 2px 4px rgba(8,12,28,.22),0 14px 30px rgba(16,24,56,.22),0 44px 88px rgba(22,32,80,.30);
  /* TQ logo palette, for washes, glows and border beams only (never text) */
  --c1:#7C5CFF;--c2:#3D8BFF;--c3:#2FD4B8;--c4:#FB7185;--c5:#F0A830;
  /* colored tiles cast their own tint:
     box-shadow:0 8px 20px color-mix(in srgb,var(--<layer>) 32%,transparent) */

  /* ---------- motion · the complete easing vocabulary ---------- */
  --ease-reveal:ease;                          /* scroll reveals */
  --ease-move:cubic-bezier(.4,0,.2,1);         /* anything that travels or draws */
  --ease-spring:cubic-bezier(.34,1.4,.64,1);   /* icon pops only */
  /* linear is used ONCE on the whole site: the film progress segments */
  --t-hover:.18s;          /* buttons */
  --t-card:.22s;           /* card lifts */
  --t-nav:.35s;            /* nav pill detach, tab slider */
  --t-stage:.5s;           /* staged element entrances */
  --t-reveal:.65s;         /* scroll reveal (.7s acceptable, pick one and hold) */
  --d-1:.08s; --d-2:.16s; --d-3:.24s;          /* reveal stagger */
}

/* ---------- mobile overrides ---------- */
@media(max-width:760px){
  :root{
    --pad-card:24px; --pad-island:28px; --sect-y:64px;
    --r-card:16px; --r-island:18px;
  }
}

/* ---------- motion kill switch · mandatory on every page ---------- */
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
  /* every staged/revealed element must also get its final state:
     opacity:1!important; transform:none!important
     and JS counters must print their end value immediately. */
}