/* ==========================================================================
   TOKENS — single source of truth for the design system.
   Mirrors design-system.json; a future CMS/theme layer overrides here.
   ========================================================================== */

:root {
    /* ---- Color (brand values per Figma) ---- */
    --orange: #f05223;
    --orange-deep: #d43e12;
    --blue: #0c5d88;
    --ink: #16161a;          /* primary text */
    --deep: #0d0f14;         /* dark section background */
    --deep-soft: #161a22;    /* raised surfaces on dark */
    --panel-dark: #292929;   /* Figma who-we-are panel-2 */
    --dark-gray: #303030;    /* Figma dark gray */
    --light-gray: #f5f5f5;   /* Figma light-gray (muted surface) */
    --paper: #ffffff;
    --paper-warm: #f6f5f2;   /* alternating section background */
    --muted: #6e6f6f;        /* Figma body-text */
    --muted-dark: #9aa0ab;   /* secondary text on dark */
    /* Sticky pin sections clear the fixed header (see work-carousel, Draft H port) */
    --header-content-inset: 5.5rem;

    --line: rgba(22, 22, 26, 0.12);
    --line-dark: rgba(255, 255, 255, 0.14);

    /* ---- Wire line system (the one ink language) ------------------------
       Governs BOTH dialects: the volumetric wireframe "spirit" (Three.js)
       and the flat rules/meshes/dividers (cloud mesh, lattice hairlines,
       hero rule field). Near = crisp ink; far dissolves to paper.
       On dark panels the spirit inverts to --wire-ink-inv over --wire-fog-dark. */
    --wire-ink: #16161a;                 /* volumetric + flat line ink (light ground) */
    --wire-ink-inv: #f5f5f5;             /* inverted ink for dark panels */
    --wire-opacity: 0.55;                /* near-line opacity target */
    --wire-weight: 1px;                  /* hairline stroke, device-independent */
    --wire-dash: 4px 6px;                /* flat-dialect dash rhythm (mesh, dividers) */
    --wire-fog-near: 4.8;                /* Three fog start (paper dissolve) */
    --wire-fog-far: 11;                  /* Three fog end */
    --wire-fog-dark: #292929;            /* fog colour on the dark panel */

    /* Semantic color roles — rebuilt sections reference these, not raw hues */
    --color-bg: var(--paper);
    --color-surface: var(--light-gray);
    --color-panel-dark: var(--dark-gray);
    --color-text: var(--dark-gray);     /* primary text on light */
    --color-text-muted: var(--body-text, #6e6f6f);
    --color-heading: var(--blue);
    --color-accent: var(--orange);
    --color-on-dark: var(--paper);
    --body-text: #6e6f6f;               /* Figma name, for parity with tokens.json */

    /* ---- Typography (families + roles per Figma) ---- */
    --font-sans: 'Museo Sans', 'Helvetica Neue', Arial, sans-serif;
    --font-secondary: 'Raleway', 'Helvetica Neue', Arial, sans-serif; /* paragraph-lg */

    /* Figma display roles: Museo Sans 700 throughout */
    --weight-display: 700;
    --text-headline-lg: clamp(3rem, 6.67vw, 6rem);        /* 96px @1440 */
    --track-headline-lg: -0.04em;                          /* -3.84px @96 */
    --text-headline: clamp(2.25rem, 4.17vw, 3.75rem);     /* 60px @1440 */
    --track-headline: -0.03em;                             /* -1.8px @60 */

    /* Fluid type scale — one clamp per role, sized against a 1440 reference */
    --text-hero: clamp(3.4rem, 11.5vw, 11rem);
    --text-display: clamp(2.4rem, 5.4vw, 4.9rem);      /* section headlines */
    --text-title: clamp(1.6rem, 3vw, 2.6rem);          /* sub-headlines, service names */
    --text-lead: clamp(1.125rem, 1.67vw, 1.5rem);      /* Figma paragraph-lg: 24px @1440 */
    --text-body: 1rem;
    --text-small: 0.8125rem;
    --text-label: 0.75rem;

    --leading-tight: 0.94;
    --leading-snug: 1.12;
    --leading-body: 1.6;

    --tracking-display: -0.035em;
    --tracking-label: 0.18em;

    /* ---- Canonical type roles (Figma-aligned; rebuilt sections use these) ----
       Family + weight aliases */
    --font-display: 'Museo Sans', 'Helvetica Neue', Arial, sans-serif;
    --font-body: 'Raleway', 'Helvetica Neue', Arial, sans-serif;
    --wt-display: 700;
    --wt-body: 400;
    --wt-body-medium: 500;
    --wt-body-bold: 700;

    /* Fluid role scale: clamp(mobile-min, fluid, desktop-max = Figma px).
       Body + label sizes are fixed (never below 16px body, WCAG). */
    /* hero (headline-xl) is breakpoint-STEPPED below — holds 200px on desktop */
    --fs-hero: 4.5rem;
    --lh-hero: 0.72;
    --tr-hero: -0.025em;                                     /* -5px @200 */

    --fs-headline-lg: clamp(2.75rem, 1.6rem + 5.11vw, 6rem); /* 44→96 */
    --lh-headline-lg: 0.958;
    --tr-headline-lg: -0.0417em;                             /* -4px @96 */

    --fs-headline: clamp(2.125rem, 1.42rem + 3.06vw, 3.75rem); /* 34→60 */
    --lh-headline: 1;
    --tr-headline: -0.0333em;                                /* -2px @60 (merged role) */

    --fs-h2: clamp(1.875rem, 1.4rem + 2vw, 3rem);            /* 30→48 */
    --lh-h2: 1;
    --fs-h3: clamp(1.625rem, 1.31rem + 1.39vw, 2.5rem);      /* 26→40 */
    --lh-h3: 1;

    --fs-card-title: clamp(1.375rem, 1.1rem + 1.22vw, 2rem); /* 22→32 */
    --lh-card-title: 1;
    --tr-card-title: -0.03em;                                /* softened from Figma -0.09em */

    --fs-section-title: 1.25rem;                             /* 20, fixed */
    --lh-section-title: 1;
    --tr-section-title: 0;

    /* Case-study lede — Figma 36/44 Raleway 400 (design-system "lede") */
    --fs-lede: clamp(1.375rem, 0.94rem + 1.46vw, 2.25rem);   /* 22→36 */
    --lh-lede: 1.222;                                         /* 44/36 */

    --fs-paragraph-lg: clamp(1.125rem, 1.02rem + 0.53vw, 1.5rem); /* 18→24 */
    --lh-paragraph-lg: 1.333;
    --fs-paragraph: 1rem;                                    /* 16, fixed */
    --lh-paragraph: 1.5;
    --fs-paragraph-sm: 0.875rem;                            /* 14, fixed */
    --lh-paragraph-sm: 1.43;
    --fs-button-label: 0.75rem;                             /* 12 */

    --fs-ghost: clamp(7.5rem, 1rem + 34.72vw, 31.25rem);    /* 120→500 */
    --lh-ghost: 0.48;
    --tr-ghost: -0.072em;

    /* ---- Space ---- */
    --space-3xs: 0.25rem;
    --space-2xs: 0.5rem;
    --space-xs: 0.75rem;
    --space-sm: 1rem;
    --space-md: clamp(1.5rem, 2.5vw, 2.5rem);
    --space-lg: clamp(2.5rem, 4.5vw, 4.5rem);
    --space-xl: clamp(4rem, 8vw, 8rem);
    --space-2xl: clamp(6rem, 11vw, 11rem);

    /* Figma "Paddings and Margins" gaps (20 / 40 / 80 → rem) */
    --gap-sm: 1.25rem;   /* 20px */
    --gap-md: 2.5rem;    /* 40px */
    --gap-lg: 5rem;      /* 80px */

    /* Global gutter + content measure */
    --gutter: clamp(1.25rem, 4.5vw, 5rem);
    --measure: 34em;
    /* Unused since every section moved onto --container. Kept as the ceiling
       we'd raise --container toward if the widest desktop view opens up. */
    --page-max: 100rem;
    --container: 75rem;   /* 1200 — Figma content width (smaller desktops / 15" laptops) */
    --frame: 90rem;       /* 1440 — Figma design canvas */

    /* ---- Motion ---- */
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --ease-emphasis: cubic-bezier(0.16, 1, 0.3, 1);  /* standardized reveal ease */
    --dur-fast: 0.25s;
    --dur-med: 0.55s;
    --dur-slow: 0.9s;

    /* ---- Standardized scroll-in reveal (site-wide via [data-reveal]) ---- */
    --reveal-distance: 1.75rem;   /* 28px */
    --reveal-dur: 0.8s;
    --reveal-ease: var(--ease-emphasis);
    --reveal-stagger: 90ms;

    /* ---- Depth (team cloud background icons) ---- */
    --depth-blur-max: 6px;

    /* ---- Misc ---- */
    --radius: 0.5rem;     /* 8px — Figma corner-radius */
    --radius-sm: 0.125rem;/* 2px hairline detail */
    --header-h: 4.5rem;

    /* Reference breakpoints (media queries use the px directly):
       sm 480 · md 768 · lg 1024 · xl 1280 · 2xl 1440 */
}

/* Hero holds a fixed size per breakpoint — never shrinks to fit words */
@media (min-width: 768px)  { :root { --fs-hero: 8rem; } }     /* tablet */
@media (min-width: 1280px) { :root { --fs-hero: 12.5rem; } }  /* 200px desktop */

/* Wide desktop: content measure opens from 1200 to 1300 (site-wide —
   every section keys off --container, so one token widens the page). */
@media (min-width: 1600px) { :root { --container: 81.25rem; } }  /* 1300px */