@layer tokens, base, components;

@layer tokens {
    @font-face {
        font-family: "Outfit";
        font-style: normal;
        font-weight: 100 900;
        font-display: swap;
        src: url("../fonts/outfit/outfit-variable.woff2") format("woff2");
    }

    @font-face {
        font-family: "Plus Jakarta Sans";
        font-style: normal;
        font-weight: 200 800;
        font-display: swap;
        src: url("../fonts/plus-jakarta-sans/plus-jakarta-sans-variable.woff2") format("woff2");
    }

    :root {
        /* Raw palette: identity values are never consumed directly by components. */
        --palette-deep-navy: #071A2E;
        --palette-navy: #0F3358;
        --palette-marketiq-blue: #5D8EDD;
        --palette-steel: #5C7893;
        --palette-silver: #C6D2DE;
        /* Metallic silver measured from the approved MarketIQ wordmark
           (mean of the gradient pixels in marketiq-wordmark-light.png); a
           restrained accent for dark surfaces only, never a new grey. */
        --palette-marketiq-silver: #BCC3CD;
        /* Satin range of the IQ mark, cooled toward the approved brand silver
           so the slogan reads as metal rather than grey: cool dark edge, body,
           bright, near-white specular, glint. */
        --palette-marketiq-silver-shadow: #8C9BAF;
        --palette-marketiq-silver-mid: #AEBAC8;
        --palette-marketiq-silver-body: #C6D2DE;
        --palette-marketiq-silver-bright: #DCE4EC;
        --palette-marketiq-silver-glint: #EEF2F6;
        --palette-marketiq-silver-specular: #FFFFFF;
        --palette-paper-alt: #F0F3F7;
        /* Owner decision 2026-09-25: the Home pre-footer CTA is a light steel
           surface (navy words, signal-blue action) so it never merges with the
           navy footer. Steel and signal blue are colour roles, not new greys. */
        --palette-steel-light: #DDE2E7;
        --palette-steel-mid: #C3CAD2;
        --palette-signal-blue: #2C6FB5;
        --palette-signal-blue-hover: #255F9C;
        --palette-ink-navy: #0B1D33;
        --palette-paper: #FBFCFD;
        --palette-ink: #0A2038;
        --palette-muted-ink: #6B8299;
        --palette-brass: #A8781F;
        --palette-brass-deep: #8F6617;
        --palette-brass-bright: #C69533;
        --palette-ink-secondary: #587087;

        /* Surface and text semantics. */
        --color-canvas: var(--palette-paper-alt);
        --color-surface: var(--palette-paper);
        --color-surface-subtle: var(--palette-paper-alt);
        --color-surface-inverse: var(--palette-deep-navy);
        --color-text-primary: var(--palette-ink);
        --color-text-secondary: var(--palette-ink-secondary);
        --color-text-tertiary: var(--palette-muted-ink);
        --color-text-inverse: var(--palette-paper);
        --color-text-inverse-secondary: var(--palette-silver);
        --color-border: var(--palette-silver);
        --color-border-strong: var(--palette-steel);
        --color-action-primary: var(--palette-navy);
        --color-action-primary-text: var(--palette-paper);
        --color-action-hover: #153F69;
        --color-action-secondary: var(--palette-navy);
        --color-action-secondary-text: var(--palette-paper);
        --color-accent-primary: var(--palette-marketiq-blue);
        --color-analytical-highlight: var(--palette-marketiq-blue);
        --color-accent-brass: var(--palette-brass);
        --color-accent-brass-inverse: var(--palette-brass-bright);
        --color-accent-silver: var(--palette-marketiq-silver);
        /* Satin metal for one statement on dark surfaces, read from the IQ mark:
           cool dark edge, luminous body, a narrow near-white specular, medium
           silver, a second smaller highlight, deeper cool silver, a luminous
           finishing tone. Nothing settles into a long flat grey. */
        --gradient-metallic-silver: linear-gradient(
            176deg,
            var(--palette-marketiq-silver-shadow) 0%,
            var(--palette-marketiq-silver-mid) 10%,
            var(--palette-marketiq-silver-body) 22%,
            var(--palette-marketiq-silver-bright) 34%,
            var(--palette-marketiq-silver-specular) 42%,
            var(--palette-marketiq-silver-bright) 50%,
            var(--palette-marketiq-silver-mid) 62%,
            var(--palette-marketiq-silver-glint) 72%,
            var(--palette-marketiq-silver-body) 82%,
            var(--palette-marketiq-silver-shadow) 100%
        );
        /* One-time light sweep layer: a soft band of paper light that crosses
           the slogan once on hero load, then parks off the text. */
        --gradient-metallic-sweep: linear-gradient(
            105deg,
            transparent 44%,
            color-mix(in srgb, var(--palette-paper) 55%, transparent) 50%,
            transparent 56%
        );
        --color-focus: var(--palette-navy);
        --color-focus-inverse: var(--palette-marketiq-blue);

        /* Restrained analytical depth. Text is tested against the lightest stop. */
        --gradient-analytical-primary: linear-gradient(
            112deg,
            var(--palette-deep-navy) 0%,
            #0B2847 58%,
            #153F69 100%
        );
        --gradient-analytical-subtle: linear-gradient(
            112deg,
            var(--palette-deep-navy) 0%,
            #0D2A49 72%,
            var(--palette-navy) 100%
        );
        --gradient-inverse-surface: linear-gradient(
            110deg,
            var(--palette-deep-navy) 0%,
            #0A243E 100%
        );
        /* Home first-section field (owner decision 2026-09-25): a restrained
           navy tonal drift anchored on #0B1D33, starting from the hero veil's
           deep navy so the hero and the space beneath it read as one surface;
           never flat, never bright. */
        --gradient-home-field: linear-gradient(
            112deg,
            var(--palette-deep-navy) 0%,
            #0B1D33 46%,
            #12293F 100%
        );
        /* Home opening scene (owner decision 2026-09-26): the same navy field
           with one soft luminous lift toward the upper right — rich, not flat;
           restrained, never glossy or bright. */
        --gradient-home-opening:
            radial-gradient(120% 80% at 84% 10%, rgba(30, 66, 110, 0.55) 0%, rgba(30, 66, 110, 0) 62%),
            linear-gradient(112deg, var(--palette-deep-navy) 0%, #0B1D33 46%, #12293F 100%);
        /* Home world (owner decision 2026-09-26): the whole Home, header to
           CTA, is one continuous navy field painted once by <main>: the
           approved 112deg drift plus one soft luminous lift in the opening. */
        --gradient-home-world:
            radial-gradient(110% 70vh at 84% 6%, rgba(30, 66, 110, 0.5) 0%, rgba(30, 66, 110, 0) 62%),
            linear-gradient(112deg, var(--palette-deep-navy) 0%, #0B1D33 40%, #12293F 100%);
        /* Global footer (owner decision 2026-09-26): light steel surface. */
        --gradient-footer-surface: linear-gradient(112deg, var(--palette-steel-light) 0%, var(--palette-steel-mid) 100%);

        /* Outcome semantics. */
        --color-positive: #1E6B4F;
        --color-adverse: #9E3132;
        --color-warning: #9A4A12;
        --color-informational: #2F5C8A;
        --color-positive-bg: #E8F2ED;
        --color-adverse-bg: #F7E9E9;
        --color-warning-bg: #F8EDE4;
        --color-informational-bg: #E9F0F8;

        /* Coverage-state tints and non-text rules. */
        --color-state-current-bg: var(--palette-paper);
        --color-state-current-rule: var(--color-accent-primary);
        --color-state-text: var(--palette-ink);
        --color-state-partial-bg: #EAF0F7;
        --color-state-partial-rule: var(--color-informational);
        --color-state-thin-bg: #F6EEE4;
        --color-state-thin-rule: var(--color-warning);
        --color-state-stale-bg: #F2F1EC;
        --color-state-stale-rule: var(--palette-steel);
        --color-state-unavailable-bg: #EEF1F4;
        --color-state-unavailable-rule: var(--palette-steel);

        /* Free Report identity, served from governed same-origin assets. */
        --font-display: "Outfit", "Avenir Next", Futura, system-ui, sans-serif;
        --font-body: "Plus Jakarta Sans", "Avenir Next", system-ui, -apple-system, "Segoe UI", sans-serif;
        --font-metadata: var(--font-body);
        --font-analytical: var(--font-display);
        --font-mono: ui-monospace, "SF Mono", Menlo, monospace;

        /* Free Report hierarchy translated to a responsive editorial web scale. */
        --text-display: clamp(2.75rem, 1.9167rem + 2.7778vw, 4rem);
        --text-h1: clamp(2.5rem, 2rem + 1.6667vw, 3.25rem);
        --text-h2: clamp(1.5rem, 1.25rem + 0.8333vw, 1.875rem);
        --text-h3: clamp(1.25rem, 1.1667rem + 0.2778vw, 1.375rem);
        --text-h4: clamp(1.0625rem, 1.0208rem + 0.1389vw, 1.125rem);
        --text-body-large: clamp(1.125rem, 1.0833rem + 0.1389vw, 1.1875rem);
        --text-body: clamp(1rem, 0.9583rem + 0.1389vw, 1.0625rem);
        --text-body-small: clamp(0.875rem, 0.8333rem + 0.1389vw, 0.9375rem);
        --text-metric-large: clamp(3rem, 2rem + 3.3333vw, 4.5rem);
        --text-metric: clamp(1.75rem, 1.25rem + 1.6667vw, 2.5rem);
        --text-metadata: 0.8125rem;
        --text-label: 0.8125rem;
        --text-min: 0.8125rem;

        --weight-display-medium: 500;
        --weight-display-semibold: 600;
        --weight-display-bold: 700;
        --weight-display-extrabold: 800;
        --weight-analytical-bold: 800;
        --weight-analytical-black: 900;
        --weight-body-regular: 400;
        --weight-body-semibold: 600;
        --weight-metadata-regular: 400;
        --weight-metadata-semibold: 600;
        --weight-mono-regular: 400;

        --leading-display: 1;
        --leading-h1: 1.08;
        --leading-h2: 1.2;
        --leading-h3: 1.3;
        --leading-h4: 1.4;
        --leading-body-large: 1.6;
        --leading-body: 1.65;
        --leading-body-small: 1.55;
        --leading-metric-large: 1;
        --leading-metric: 1;
        --leading-metadata: 1.5;
        --leading-label: 1.4;

        --tracking-display: -0.02em;
        --tracking-h1: -0.02em;
        --tracking-h2: -0.012em;
        --tracking-h3: 0;
        --tracking-h4: 0;
        --tracking-metric-large: -0.02em;
        --tracking-metric: -0.015em;
        --tracking-metadata: 0.02em;
        --tracking-label: 0.16em;

        /* Motion system: every duration, delay and easing is consumed through tokens.
           Motion is reducible; reduced-motion users receive final states. */
        --motion-fast: 120ms;
        --motion-standard: 200ms;
        --motion-reveal: 480ms;
        --motion-editorial: 720ms;
        --motion-identity: 3600ms;
        --motion-identity-settle: 2600ms;
        --motion-stagger: 90ms;
        --motion-sequence: 1400ms;
        --motion-ambient: 24000ms;
        /* Home opening sequence (owner motion pass 2026-09-26): signals enter
           dispersed, organise and dissolve into the identity; the approved J
           resolves; then the slogan clarifies; then the two supporting lines. */
        --motion-signal-enter: 900ms;
        --motion-signal-organise: 1100ms;
        --motion-signal-settle: 600ms;
        --motion-opening-identity: 800ms;
        --motion-opening-slogan: 2200ms;
        --motion-opening-copy: 2900ms;
        --ease-standard: cubic-bezier(0.2, 0, 0, 1);
        --ease-decelerate: cubic-bezier(0.1, 0.7, 0.1, 1);
        --ease-editorial: cubic-bezier(0.45, 0, 0.15, 1);

        /* Approved brand marks: intrinsic geometry of the vendored assets. */
        --brand-wordmark-ratio: 2400 / 680;
        --brand-symbol-ratio: 1;
        --brand-marketiq-ratio: 2172 / 724;
        --brand-wordmark-header: clamp(7.25rem, 36vw, 9.5rem);
        --brand-wordmark-footer: 12rem;

        /* Spacing and geometry. */
        --space-1: 0.25rem;
        --space-2: 0.5rem;
        --space-3: 0.75rem;
        --space-4: 1rem;
        --space-5: 1.5rem;
        --space-6: 2rem;
        --space-7: 3rem;
        --space-8: 4rem;
        --space-9: 6rem;
        --radius-sm: 2px;
        --radius-md: 4px;
        --border-w: 1px;
        --rule-w: 2px;
        --focus-w: 2px;
        --shell-max: 75rem;
        --prose-max: 45rem;
        --gutter: 1.25rem;
        --grid-gap: 1rem;
        --section-space: var(--space-8);
        --subsection-space: var(--space-6);
        --breakpoint-sm: 30rem;
        --breakpoint-md: 48rem;
        --breakpoint-lg: 64rem;
        --breakpoint-xl: 75rem;
        --header-height: 3.5rem;
    }

    [data-tone="inverse"] {
        --color-canvas: var(--palette-deep-navy);
        --color-surface: var(--palette-deep-navy);
        --color-surface-subtle: var(--palette-navy);
        --color-surface-inverse: var(--palette-paper);
        --color-text-primary: var(--palette-paper);
        --color-text-secondary: var(--palette-silver);
        --color-text-tertiary: var(--palette-silver);
        --color-text-inverse: var(--palette-ink);
        --color-text-inverse-secondary: var(--palette-ink-secondary);
        --color-border: var(--palette-navy);
        --color-border-strong: var(--palette-steel);
        --color-action-secondary: var(--palette-paper);
        --color-action-secondary-text: var(--palette-deep-navy);
        --color-accent-brass: var(--palette-brass-bright);
        --color-focus: var(--color-focus-inverse);
        --color-state-current-bg: var(--palette-paper);
        --color-state-text: var(--palette-ink);
    }

    @media (min-width: 48rem) {
        :root {
            --gutter: 2rem;
            --grid-gap: 1.25rem;
        }
    }

    @media (min-width: 64rem) {
        :root {
            --gutter: 3rem;
            --grid-gap: 1.5rem;
            --section-space: var(--space-9);
            --subsection-space: var(--space-7);
            --header-height: 4rem;
            --brand-wordmark-header: 12.5rem;
            --brand-wordmark-footer: 14rem;
        }
    }
}