/* ============================================================================
   Streetbeat — Design Tokens
   SINGLE SOURCE OF TRUTH for color, surface, layout, shape and motion values.
   Mirrors the role that assets/typography.css plays for type.

   Every page links this file (assets/css/tokens.css, or ../assets/css/tokens.css
   from a subfolder) and must consume these variables instead of hand-writing hex
   values, max-widths, radii or easing curves. Never redefine a token in a page's
   :root — change it here so it changes everywhere.

   Palette values are locked (see REDESIGN-RESEARCH.md §0.1). The homepage
   (index.html) is the canonical reference for the exact accent + surface values.
   ============================================================================ */

/* This file is the PRIMITIVES layer — the single place raw hex is allowed to
   live. Every other stylesheet must consume these as var(--…) tokens, but the
   tokens themselves have to resolve to literal values here. The design-lint
   `color-no-hex` backstop assumes primitives live in JSON; here they live in
   CSS, so it is disabled for this file only (not globally). */
/* stylelint-disable color-no-hex */
:root {
    /* ========================================================================
       TIER 1 — PRIMITIVES (112). The ONLY sanctioned home for raw colour hex.
       Hue-named to mirror the imported Brand Hub. Edited as hex in /ds.
       ======================================================================== */
    /* Neutral (13) */
    --c-neutral-0: #FFFFFF;  --c-neutral-50: #FAFAFA; --c-neutral-100: #F5F6F6;
    --c-neutral-200: #E0E1E3; --c-neutral-300: #C4C4C4; --c-neutral-400: #B5B8BF;
    --c-neutral-500: #9B9FA7; --c-neutral-600: #4E5157; --c-neutral-700: #34363A;
    --c-neutral-800: #2A2B2E; --c-neutral-900: #202124; --c-neutral-950: #111112;
    --c-neutral-1000: #000000;
    /* Green (11) */
    --c-green-50: #E0FFEB; --c-green-100: #C7FFDA; --c-green-200: #ADFFC9;
    --c-green-300: #54F68D; --c-green-400: #61FF9B; --c-green-500: #46FE8D;
    --c-green-600: #2BF076; --c-green-700: #00CC4F; --c-green-800: #00AD3A;
    --c-green-900: #009431; --c-green-950: #007A29;
    /* Cyan (11) */
    --c-cyan-50: #E8FCFC; --c-cyan-100: #CFFCFC; --c-cyan-200: #B6FCFC;
    --c-cyan-300: #5BFFFF; --c-cyan-400: #05F9F9; --c-cyan-500: #02EDED;
    --c-cyan-600: #00E8E8; --c-cyan-700: #00CCCB; --c-cyan-800: #04B2AF;
    --c-cyan-900: #009996; --c-cyan-950: #008387;
    /* Teal (11) */
    --c-teal-50: #8DF9F9; --c-teal-100: #31E4F5; --c-teal-200: #00C9F1;
    --c-teal-300: #00AFE5; --c-teal-400: #069DCC; --c-teal-500: #0689B2;
    --c-teal-600: #007599; --c-teal-700: #1D677E; --c-teal-800: #265874;
    --c-teal-900: #115F8B; --c-teal-950: #00507E;
    /* Blue (11) */
    --c-blue-50: #B2ECFF; --c-blue-100: #80D4FF; --c-blue-200: #4CB5FF;
    --c-blue-300: #329DFF; --c-blue-400: #2288E5; --c-blue-500: #0A6FCC;
    --c-blue-600: #005DB2; --c-blue-700: #004A8F; --c-blue-800: #114189;
    --c-blue-900: #0F4595; --c-blue-950: #013685;
    /* Purple (11) */
    --c-purple-50: #E5D9FF; --c-purple-100: #D4BFFF; --c-purple-200: #B88CFF;
    --c-purple-300: #B073FF; --c-purple-400: #985CE5; --c-purple-500: #8247CC;
    --c-purple-600: #6D36B2; --c-purple-700: #5E1FB1; --c-purple-800: #622CA8;
    --c-purple-900: #55298E; --c-purple-950: #4D1F86;
    /* Magenta (11) */
    --c-magenta-50: #FFD4E4; --c-magenta-100: #FFA3C2; --c-magenta-200: #FF6691;
    --c-magenta-300: #FF4C77; --c-magenta-400: #E53963; --c-magenta-500: #CC294F;
    --c-magenta-600: #B21B3F; --c-magenta-700: #AD2F4D; --c-magenta-800: #961735;
    --c-magenta-900: #8F2942; --c-magenta-950: #802E42;
    /* Red (11) */
    --c-red-50: #FFDAD4; --c-red-100: #FFA18C; --c-red-200: #FF6D4C;
    --c-red-300: #FF5833; --c-red-400: #F24D29; --c-red-500: #DE3E1B;
    --c-red-600: #C42E0E; --c-red-700: #C52316; --c-red-800: #B52E23;
    --c-red-900: #B50909; --c-red-950: #DE1010;
    /* Mustard (11) */
    --c-mustard-50: #FFEDCB; --c-mustard-100: #FFD483; --c-mustard-200: #FFC455;
    --c-mustard-300: #F0A61B; --c-mustard-400: #C99016; --c-mustard-500: #CF7A16;
    --c-mustard-600: #9F5A0A; --c-mustard-700: #855318; --c-mustard-800: #853F18;
    --c-mustard-900: #9B3D1E; --c-mustard-950: #933A1D;
    /* Yellow (11) */
    --c-yellow-50: #FBFFD9; --c-yellow-100: #F7FFB2; --c-yellow-200: #F4FF8C;
    --c-yellow-300: #EEFF59; --c-yellow-400: #E4F249; --c-yellow-500: #D9D936;
    --c-yellow-600: #CCBE1F; --c-yellow-700: #BFB113; --c-yellow-800: #AB9D08;
    --c-yellow-900: #9B8E00; --c-yellow-950: #8F8628;
    /* Amber (1) — brand secondary accent · Indigo + Pink (1 each) — chart hues
       outside the 10 ramps; single-step primitives so the working tokens link. */
    --c-amber-500: #E5A000;
    --c-indigo-500: #6366F1;
    --c-pink-500: #EC4899;

    /* ========================================================================
       TIER 2 — ROLE SEMANTICS (17, Light). Dark values live in .theme-dark.
       These drive the /ds gallery + dark preview ONLY in Phase 1; the product
       keeps consuming the working tokens below. Editing a shared primitive
       flows to BOTH.
       ======================================================================== */
    --brand-primary: var(--c-green-700);
    --brand-secondary: var(--c-cyan-700);
    --text-primary: var(--c-neutral-950);
    --text-secondary: var(--c-neutral-600);
    --text-negative: var(--c-red-300);
    --surface-canvas: var(--c-neutral-0);
    --surface-raised: var(--c-neutral-50);
    --border-default: var(--c-neutral-500);
    --border-subtle: var(--c-neutral-200);
    --feedback-positive: var(--c-green-700);
    --feedback-negative: var(--c-red-300);
    --feedback-warning: var(--c-mustard-300);
    --chart-series-1: var(--c-green-700);
    --chart-series-2: var(--c-cyan-700);
    --chart-series-3: var(--c-purple-300);
    --chart-series-4: var(--c-blue-300);
    --chart-series-5: var(--c-mustard-300);
    --chart-series-6: var(--c-magenta-300);

    /* ========================================================================
       PRODUCT WORKING TOKENS — what the 7 pages actually consume. Phase 1:
       reference a primitive where a clean ramp step exists (same value), keep
       bespoke values as literal hex. Byte-identical to before the rewrite.
       ======================================================================== */
    /* Surfaces */
    --bg-white: var(--c-neutral-0);
    --bg-gray: var(--c-neutral-100);
    --bg-dark: var(--c-neutral-950);
    --bg-card-dark: #16171A;   /* bespoke */
    --bg-green-tint: #EEFBF2;  /* bespoke */
    --bg-blue-tint: #EAF6F7;   /* bespoke */
    --flow-green: #C9F4D9;     /* bespoke */
    --flow-blue: #BFE8EA;      /* bespoke */
    /* Brand accents */
    --green: var(--c-green-700);
    --green-bright: var(--c-green-500);
    --cyan: var(--c-cyan-800);
    --cyan-bright: #5AF5F0;     /* bespoke */
    --amber: var(--c-amber-500);
    /* Text */
    --text-dark: var(--c-neutral-950);
    --text-body: var(--c-neutral-600);
    --text-muted: var(--c-neutral-500);
    /* Text on dark */
    --text-on-dark: var(--c-neutral-200);
    --text-on-dark-muted: var(--c-neutral-400); /* was #B9BCC2, linked (ΔRGB 6) */
    --green-soft: var(--c-green-50);
    --cyan-soft: var(--c-cyan-50);
    /* Scroll-fill dims */
    --sf-dim-light: #CDD0D4;    /* bespoke */
    --sf-dim-dark: #3A3D42;     /* bespoke */
    /* Lines */
    --border: var(--c-neutral-200);
    /* Portfolio chart palette */
    --chart-indigo: var(--c-indigo-500);
    --chart-pink: var(--c-pink-500);
    /* Gain / loss */
    --positive: var(--c-green-700);
    --negative: #E5484D;        /* bespoke */
    /* Translucent text on dark (read-only) */
    --text-on-dark-faint: rgba(224, 225, 227, 0.4);

    /* ---- Type families (mirrors assets/typography.css) ---- */
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-display: 'Roobert', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

    /* ---- Layout ---- */
    --max: 1440px;
    --max-width: 1140px;
    --pad: clamp(20px, 5vw, 80px);

    /* ---- Spacing scale ----
       Progressive: 2px steps small, widening to 32px at the top. Every fixed
       gap / padding / margin references one of these (see tools/space-codemod.js). */
    --space-2: 2px;
    --space-4: 4px;
    --space-6: 6px;
    --space-8: 8px;
    --space-10: 10px;
    --space-12: 12px;
    --space-14: 14px;
    --space-16: 16px;
    --space-20: 20px;
    --space-24: 24px;
    --space-32: 32px;
    --space-40: 40px;
    --space-48: 48px;
    --space-64: 64px;
    --space-80: 80px;
    --space-96: 96px;
    --space-128: 128px;

    /* ---- Fluid typography breakpoints ----
       The viewport widths at which fluid type reaches its MIN and MAX size.
       The /ds typography editor derives each --ts-*-size clamp() from these. */
    --bp-min: 390px;
    --bp-max: 1440px;

    /* ---- Shape ---- */
    --radius-2xs: 2px;   /* hairline bars (nav burger lines) */
    --radius-xs: 4px;    /* tiny accents (nav hover underline) */
    --radius-sm: 12px;   /* list rows, inputs, small tiles */
    --radius-md: 16px;   /* inner cards (e.g. mega-nav featured panel) */
    --radius: 20px;
    --radius-lg: 40px;
    --radius-pill: 9999px; /* fully-round: nav bar pill, links, pills, mobile CTAs */
    --corner-shape: superellipse(1.6);

    /* ---- Elevation (shadows) ---- */
    --shadow-nav-pill: 0 8px 30px rgba(17, 17, 18, 0.08);    /* docked nav pill */
    --shadow-mega-bar: 0 40px 70px rgba(17, 17, 18, 0.12);   /* expanded nav-bar panel */
    --shadow-mega-card: 0 30px 80px rgba(17, 17, 18, 0.16);  /* docked floating mega card */
    --glow-nav-underline: 0 0 12px 3px rgba(0, 204, 79, 0.4); /* nav link hover underline */

    /* ---- Elevation (z-index) ---- */
    --z-nav: 100;         /* fixed top nav bar */
    --z-nav-link: 1;      /* nav link above its sliding hover pill (z 0) */
    --z-menu: 200;        /* mobile nav menu */
    --z-scrollbar: 250;   /* overlay scrollbar — above the menu */

    /* ---- Control glyphs ---- */
    --nav-close-size: 34px; /* mobile-menu close "×" */

    /* ---- Motion ---- */
    --ease: cubic-bezier(0.22, 1, 0.36, 1);

    /* ---- Sequential reveal (see assets/js/reveal-on-scroll.js) ---- */
    --reveal-ease: cubic-bezier(0.33, 1, 0.68, 1);
    --reveal-duration: 1s;
    --reveal-delay: 0.12s;
    --reveal-stagger: 0.1s;
    --reveal-shift: 16px;
    --reveal-blur: 8px;

    /* ---- Component tokens ----
       Per-component variables consumed by assets/css/components.css and
       surfaced/editable in /ds → Components → Elements. Filled-variant hover /
       pressed states are derived from the base bg via color-mix (see that file),
       so only base bg/fg + global mix amounts live here — no state explosion. */
    /* Global (component-wide) */
    --btn-radius: 9999px;
    --btn-gap: var(--space-8);
    --btn-line: 1;                /* single-line centring, independent of type style */
    --btn-hover-darken: 8%;
    --btn-active-darken: 14%;
    --btn-ghost-hover-fill: 6%;
    /* Per-size shape */
    --btn-pad-y-s: var(--space-8);  --btn-pad-x-s: var(--space-16);
    --btn-pad-y-m: var(--space-10); --btn-pad-x-m: var(--space-20);
    --btn-pad-y-l: var(--space-16); --btn-pad-x-l: var(--space-32);
    /* Per-size font — driven by the type-style selector in /ds (one style/size).
       Defaults: L→Eyebrow/M, M→Eyebrow/S, S→Label/S. */
    --btn-l-family: var(--ts-eyebrow-m-family); --btn-l-size: var(--ts-eyebrow-m-size); --btn-l-weight: var(--ts-eyebrow-m-weight); --btn-l-spacing: var(--ts-eyebrow-m-spacing);
    --btn-m-family: var(--ts-eyebrow-s-family); --btn-m-size: var(--ts-eyebrow-s-size); --btn-m-weight: var(--ts-eyebrow-s-weight); --btn-m-spacing: var(--ts-eyebrow-s-spacing);
    --btn-s-family: var(--ts-label-s-family);   --btn-s-size: var(--ts-label-s-size);   --btn-s-weight: var(--ts-label-s-weight);   --btn-s-spacing: var(--ts-label-s-spacing);
    /* Per-variant colour (token pickers in /ds) */
    --btn-primary-bg: var(--green);        --btn-primary-fg: var(--text-dark);
    --btn-default-bg: var(--c-neutral-100);      --btn-default-fg: var(--text-dark);
    --btn-ghost-fg: var(--text-primary);      --btn-ghost-border: var(--border);
    --btn-destructive-bg: var(--negative); --btn-destructive-fg: var(--bg-white);

    /* Special button — single variant. Colours mirror the homepage team card's
       LinkedIn pill (.contact--li): very light green at rest, darker mint on
       hover, dark text, no glow. Consumed by .sb-btn--special; editable in
       /ds → Components → Elements. */
    --btn-special-bg: var(--green-soft);
    --btn-special-fg: var(--text-dark);
    --btn-special-bg-hover: var(--c-green-200);   /* #ADFFC9 */
    --btn-special-pad-y: var(--space-16);
    --btn-special-pad-x: var(--space-32);
    --btn-special-family: var(--ts-eyebrow-s-family); --btn-special-size: var(--ts-eyebrow-s-size); --btn-special-weight: var(--ts-eyebrow-s-weight); --btn-special-spacing: var(--ts-eyebrow-s-spacing);
    /* Special · frosted variant — mirrors the team card's email/phone pill
       (.contact): a dark translucent surface over the portrait, hairline border
       and backdrop blur, white text. Layout/type inherit the special base; only
       the colour + glass treatment change. Consumed by .sb-btn--special.sb-btn--frosted. */
    --btn-special-frosted-bg: rgba(16, 17, 20, 0.55);
    --btn-special-frosted-bg-hover: rgba(16, 17, 20, 0.72);
    --btn-special-frosted-fg: var(--c-neutral-0);
    --btn-special-frosted-border: rgba(255, 255, 255, 0.16);
    --btn-special-frosted-border-hover: rgba(255, 255, 255, 0.3);
    --btn-special-frosted-blur: 8px;

    /* Input — one control class for input / select / textarea. Consumed by
       .sb-input; editable in /ds → Components → Elements. Defaults mirror the
       original careers "Join the team" fields: fixed 52px height, horizontal
       padding only, and a clean border-only focus (no glow). */
    --input-bg: var(--bg-white);
    --input-fg: var(--text-dark);
    --input-placeholder: var(--text-muted);
    --input-border: var(--border);
    --input-border-focus: var(--green);
    --input-radius: 12px;
    --input-height: 52px;                 /* single-line input/select */
    --input-pad-x: var(--space-16);
    --input-pad-y: var(--space-12);       /* textarea only (multi-line) */
    --input-textarea-min-h: 120px;
    /* Body/Base (fixed 16px). Deliberately NOT the fluid Body/M — a fixed-height
       control needs a stable type size, not one that grows to 20px on wide views. */
    --input-font-family: var(--ts-body-base-family); --input-font-size: var(--ts-body-base-size); --input-font-weight: var(--ts-body-base-weight); --input-font-spacing: var(--ts-body-base-spacing);
}

/* ============================================================================
   TIER 2 (Dark) — role semantics under .theme-dark. Toggled by the /ds mode
   switch (and, in Phase 2, by the product). Light values stay in :root above.
   ============================================================================ */
.theme-dark {
    --brand-primary: var(--c-green-500);
    --brand-secondary: var(--c-cyan-400);
    --text-primary: var(--c-neutral-0);
    --text-secondary: var(--c-neutral-500);
    --text-negative: var(--c-red-300);
    --surface-canvas: var(--c-neutral-950);
    --surface-raised: var(--c-neutral-900);
    --border-default: var(--c-neutral-600);
    --border-subtle: var(--c-neutral-800);
    --feedback-positive: var(--c-green-500);
    --feedback-negative: var(--c-red-300);
    --feedback-warning: var(--c-mustard-300);
    --chart-series-1: var(--c-green-500);
    --chart-series-2: var(--c-cyan-400);
    --chart-series-3: var(--c-purple-300);
    --chart-series-4: var(--c-blue-300);
    --chart-series-5: var(--c-yellow-300);
    --chart-series-6: var(--c-magenta-300);
}

/* ============================================================================
   Continuous corners — site-wide squircle
   Every rounded corner on the site uses the continuous superellipse curve
   (--corner-shape) instead of a plain circular arc. This is a progressive
   enhancement: `corner-shape` is a newer property (Chrome 139+); browsers that
   don't understand it simply drop this declaration and fall back to the plain
   circular `border-radius` each element already sets. Tune the curve in one
   place via --corner-shape above; never hand-write `corner-shape` per element.
   ============================================================================ */
*,
*::before,
*::after {
    corner-shape: var(--corner-shape);
}