/* ------------------------------------------------------------
   synappro design system — tokens
   New, separate token set for the redesign. Deliberately does NOT
   reuse names from css/styles.css (--color-bg, --color-primary, etc) —
   those are still load-bearing for every page not yet migrated to the
   new design, plus both /stats dashboards. Redesigned pages link this
   file instead of styles.css/header.css/footer.css.
   ------------------------------------------------------------ */

:root {
    /* Colour */
    --canvas: #F5F6F9;
    --surface-card: #FFFFFF;
    --neutral-100: #ECEEF3;
    --border-hairline: #DFE2EA;
    --ink-950: #2A2A2B;
    --ink-900: #39393A;
    --ink-700: #55555A;
    --ink-500: #6E6E73;
    --terracotta-500: #E35336;
    --terracotta-600: #C6412A;
    --terracotta-700: #9E3220;
    --terracotta-300: #EF9377;
    --terracotta-100: #FADCD2;
    --terracotta-50: #FDF1ED;
    --sky-800: #0D305D;
    --sky-700: #124382;
    --sky-600: #1758AB;
    --sky-500: #1E6FD6;
    --sky-300: #75A2E6;
    --sky-200: #A7C4F0;
    --sky-100: #D3E2F8;
    --sky-50: #EDF3FC;

    /* Type families */
    --font-heading: 'Arial Rounded MT Bold', 'Varela Round', sans-serif;
    --font-body: 'Hanken Grotesk', system-ui, sans-serif;
    --font-mono: 'IBM Plex Mono', monospace;

    /* Type ladder — eight steps, no in-between values */
    --fs-12: 12px;
    --fs-14: 14px;
    --fs-16: 16px;
    --fs-21: 21px;
    --fs-33: 33px;
    --fs-52: 52px;
    --fs-88: 88px;
    --fs-132: 132px;

    /* Layout */
    --content-max: 1120px;
    --side-pad: 24px;
    --side-pad-mobile: 20px;

    /* Radius */
    --r-band: 36px;
    --r-card: 28px;
    --r-nav: 20px;
    --r-btn: 16px;
    --r-pill: 10px;

    /* Elevation — cool-tinted, large blur, low opacity */
    --shadow-sm: 0 2px 6px hsl(220 18% 55% / 0.10);
    --shadow-md: 0 6px 18px hsl(220 18% 55% / 0.14);
    --shadow-lg: 0 14px 40px hsl(220 18% 55% / 0.16);
    --shadow-xl: 0 28px 72px hsl(220 18% 55% / 0.20);

    /* Motion */
    --ease-breath: cubic-bezier(0.42, 0, 0.28, 1);
    --dur-control: 160ms;
    --dur-surface: 260ms;
    --dur-sheet: 420ms;
    --dur-atmos: 700ms;

    /* Grain — monochrome noise tile, self-contained (no external asset).
       Layer at 0.10-0.12 opacity, mix-blend-mode overlay on imagery /
       brand fields, multiply on the glass nav. Never above 0.16. */
    --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

    /* Glass tint — soft light sheen for the glass nav overlay. Exact value
       wasn't specified in the handoff; this is a restrained interpretation
       consistent with the "daylight, not spotlight" elevation language. */
    --glass-tint: radial-gradient(120% 140% at 18% -10%, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 60%);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: none; text-size-adjust: none; }

body {
    margin: 0;
    min-height: 100vh;
    background: var(--canvas);
    color: var(--ink-900);
    font-family: var(--font-body);
    font-size: 18px;
    line-height: 1.65;
    overflow-x: hidden;
}

img, picture { max-width: 100%; display: block; }

a { color: inherit; }

h1, h2, h3, h4 { margin: 0; font-family: var(--font-heading); text-wrap: balance; }
p { margin: 0; }

/* Focus ring — 3px sky at 28%, never removed */
:focus-visible {
    outline: 3px solid rgba(30, 111, 214, 0.28);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ------------------------------------------------------------
   Typography roles
   ------------------------------------------------------------ */

.t-eyebrow {
    font-family: var(--font-mono);
    font-size: var(--fs-12);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-700);
    margin: 0;
}
.t-eyebrow.is-13 { font-size: 13px; }

.t-metadata {
    font-family: var(--font-mono);
    font-size: var(--fs-12);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-500);
    margin: 0;
}

.t-h1 {
    font-size: var(--fs-88);
    line-height: 1.08;
    letter-spacing: -0.005em;
    color: var(--ink-900);
}
.t-h2 {
    font-size: var(--fs-52);
    line-height: 1.12;
    letter-spacing: -0.005em;
    color: var(--ink-900);
}
.t-h3 {
    font-size: var(--fs-33);
    line-height: 1.2;
    color: var(--ink-900);
}
.t-h4 {
    font-size: var(--fs-21);
    line-height: 1.3;
    color: var(--ink-900);
}

.t-lead {
    font-family: var(--font-body);
    font-size: 20px;
    line-height: 1.6;
    color: var(--ink-700);
    max-width: 62ch;
    text-wrap: pretty;
}
.t-body {
    font-family: var(--font-body);
    font-size: 18px;
    line-height: 1.65;
    color: var(--ink-700);
    text-wrap: pretty;
}
.t-small {
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.55;
    color: var(--ink-700);
}

.t-numeral-lg {
    font-family: var(--font-mono);
    font-size: var(--fs-88);
    line-height: 1;
    color: var(--ink-900);
}
.t-numeral-sm {
    font-family: var(--font-mono);
    font-size: var(--fs-52);
    line-height: 1;
    color: var(--ink-900);
}

@media (max-width: 859px) {
    .t-h1 { font-size: var(--fs-52); }
    .t-h2 { font-size: var(--fs-33); }
}
@media (max-width: 559px) {
    .t-h1 { font-size: var(--fs-52); line-height: 1.1; }
    .t-h2 { font-size: var(--fs-33); }
}