/* ============================================================================
   tokens.css — THE single design-token authority for the TechHand theme.

   This block is the ONLY place brand color hex may appear. Every page binds
   these custom properties (var(--blue), var(--bg), ...) and never re-types a
   color. A brand-color change is a one-line edit here.

   Brand lock (TechHand): black #000000, near-black #0A0A0A, soft-white
   #F5F5F5, pure #FFFFFF; blue #00CCFF is the sacred accent (sparing use —
   focus / active / high-value only), blue-light #4DDBFF is its hover.

   Translucent blue NEVER appears as a raw rgba brand literal — it is
   produced only through the pinned alpha-blue tokens (--blue-a08/a12/a20),
   each a color-mix over var(--blue). Pages hard-bind var(--blue-a08);
   an undefined custom property computes to nothing silently, so these names
   are a fixed contract.
   ============================================================================ */

/* --- Real faces (self-hosted variable woff2) --- */
@font-face{
    font-family:'Inter';
    src:url('/theme-lab/fonts/inter-latin-var.woff2') format('woff2');
    font-weight:100 900;
    font-style:normal;
    font-display:swap;
}
@font-face{
    font-family:'Space Grotesk';
    src:url('/theme-lab/fonts/spacegrotesk-latin-var.woff2') format('woff2');
    font-weight:100 700;
    font-style:normal;
    font-display:swap;
}
@font-face{
    font-family:'JetBrains Mono';
    src:url('/theme-lab/fonts/jetbrainsmono-latin-var.woff2') format('woff2');
    font-weight:100 800;
    font-style:normal;
    font-display:swap;
}
/* Bebas Neue (OFL, single weight 400, latin subset ~8.6KB) — the MEGA display
   tier only (var(--font-headline)); Space Grotesk stays the working display. */
@font-face{
    font-family:'Bebas Neue';
    src:url('/theme-lab/fonts/bebasneue-latin.woff2') format('woff2');
    font-weight:400;
    font-style:normal;
    font-display:swap;
}

/* --- Metric-matched fallbacks (system font, no network) — each fallback
   occupies the same box the web font will, so text does not reflow when the
   web font swaps in; CLS approaches 0. --- */
@font-face{
    font-family:'Inter Fallback';
    src:local('Arial');
    size-adjust:107%;
    ascent-override:90%;
    descent-override:22.43%;
    line-gap-override:0%;
}
@font-face{
    font-family:'Space Grotesk Fallback';
    src:local('Arial');
    size-adjust:100%;
    ascent-override:98%;
    descent-override:24%;
    line-gap-override:0%;
}
@font-face{
    font-family:'JetBrains Mono Fallback';
    src:local('Courier New');
    size-adjust:98%;
    ascent-override:87%;
    descent-override:23%;
    line-gap-override:0%;
}
/* Bebas Neue is tall + very condensed; Arial Narrow at 82% size-adjust is the
   closest metric match on the system stack. */
@font-face{
    font-family:'Bebas Neue Fallback';
    src:local('Arial Narrow');
    size-adjust:82%;
    ascent-override:110%;
    descent-override:21%;
    line-gap-override:0%;
}

:root{
    /* Surfaces (dark-first default) */
    --black:#000000;
    --bg:#0A0A0A;
    --bg-2:#111111;
    --bg-card:#151515;
    --bg-card-hover:#1A1A1A;

    /* Foreground + neutrals */
    --white:#F5F5F5;
    --white-pure:#FFFFFF;
    --gray:#777;
    --gray-dark:#555;
    --gray-line:rgba(255,255,255,.07);

    /* Sacred accent + hover — the only brand hex in the whole codebase */
    --blue:#00CCFF;
    --blue-light:#4DDBFF;
    --accent:var(--blue);              /* alias kept for porting legacy section CSS */

    /* Alpha-blue tokens (PINNED names) — translucent blue without a raw rgba literal */
    --blue-a08:color-mix(in srgb, var(--blue) 8%, transparent);
    --blue-a12:color-mix(in srgb, var(--blue) 12%, transparent);
    --blue-a20:color-mix(in srgb, var(--blue) 20%, transparent);

    /* Ambient atmosphere tokens: indigo/violet allowed ONLY as blurred
       background atmosphere (hero orbs, section glows) — never as accent,
       CTA, link, border, or text color. Blue remains the sole brand accent.
       Indigo (not another cyan) keeps the atmosphere from competing with it. */
    --ambient-indigo:#6366F1;
    --ambient-violet:#8B5CF6;

    /* Type — families resolve to the @font-face declarations above */
    --font-display:'Space Grotesk','Space Grotesk Fallback',sans-serif;
    --font-body:'Inter','Inter Fallback',sans-serif;
    --font-data:'JetBrains Mono','JetBrains Mono Fallback',monospace;
    /* MEGA display tier — Bebas Neue for mask-split headline moments only;
       Space Grotesk stays the working display family. */
    --font-headline:'Bebas Neue','Bebas Neue Fallback',sans-serif;
    /* Testimonial voice — an elegant book serif, italicized at the use site,
       clearly distinct from the three UI faces. System serif stack on purpose;
       a webfont buy is a one-line change here. */
    --font-testimonial:'Iowan Old Style','Palatino Linotype',Palatino,Georgia,'Times New Roman',serif;

    /* MEGA type ramp — hero H1 / stacked-card + finale titles / Bebas section heads */
    --text-mega:clamp(3.4rem,11vw,10rem);
    --text-giant:clamp(2.6rem,7vw,5.6rem);
    --text-title:clamp(1.8rem,4vw,3.2rem);

    /* Motion — house easing vocabulary.
       --ease        default (quart-out feel)
       --ease-out    signature settle: fast attack, long luxurious tail
       --ease-spring subtle overshoot for lifts/hovers — transform-only, never
                     on layout-affecting properties */
    --ease:cubic-bezier(.25,1,.5,1);
    --ease-out:cubic-bezier(.16,1,.3,1);
    --ease-spring:cubic-bezier(.34,1.28,.44,1);
    /* mask-reveal ease + the two long durations the primitive library shares */
    --ease-mask:cubic-bezier(.77,0,.18,1);
    --dur-2:.6s;
    --dur-3:1s;
}

/* Light theme — intentional, equal to dark. Opt in with <html data-theme="light">.
   Surface + foreground neutrals flip, and the accent DARKENS: #00CCFF is a
   near-2:1 contrast on white, unusable for text/focus — the darkened pair
   below holds >=4.5:1 on --bg while staying unmistakably the same brand blue. */
[data-theme="light"]{
    --bg:#F5F5F5;
    --bg-2:#ECECEC;
    --bg-card:#FFFFFF;
    --bg-card-hover:#F0F0F0;
    --white:#0A0A0A;                   /* foreground role flips to near-black */
    --white-pure:#000000;
    --gray:#666;
    --gray-dark:#888;
    --gray-line:rgba(0,0,0,.08);
    --blue:#006E96;
    --blue-light:#00587A;              /* hover shifts darker on light surfaces */
}