/*
 * Design tokens - Sonar brand ("Max Min" theme, "Modern Editorial" typography).
 * Single source of truth for colors, type, spacing, layout and motion.
 * Every page links this file before its other stylesheets; JS reads colors
 * from here through CSSVar (common-data.js) or `var(--…)` strings.
 *
 * Breakpoints (CSS variables cannot be used inside @media, keep these in sync):
 *   1100px  wide desktop / compact desktop
 *    900px  tablet: denser comparison tables
 *    820px  filters collapse behind a toggle
 *    720px  mobile: sub-nav tracking tightens, header gutters shrink
 *    640px  small mobile: tables and grids stack
 *    480px  narrow phones
 */

:root {
    /* ---- Brand palette ---- */
    --color-accent: #126ed3; /* Qube Blue: links, active states, primary data */
    --color-accent-strong: #0c5db5; /* hover / pressed accent, blueprint lines */
    --color-accent-soft: color-mix(
        in srgb,
        var(--color-accent) 12%,
        transparent
    ); /* selected option */
    --color-row-hover: color-mix(in srgb, var(--color-accent) 7%, var(--color-card));
    --color-ink: #0a0a0a; /* headings, primary text */
    --color-body: #0a0a0a; /* running text */
    --color-muted: #56627a; /* secondary text, units, captions */
    --color-brand: #0a0a0a; /* copyright bar */
    --color-on-brand: #ffffff;
    --color-on-accent: #ffffff; /* text on accent fills */
    --color-cta-bg: var(--color-brand); /* primary notch button */
    --color-cta-fg: #ffffff;
    --color-footer-bar: var(--color-brand);
    --color-danger: #d3121d; /* Sonar red: regressions, blocker */

    /* ---- Surfaces & lines ---- */
    --color-surface: #f4f6f8; /* page background */
    --color-card: #ffffff; /* cards, tables, chart frames, controls */
    --color-band: #f4f4f4; /* table header rows */
    --color-band-2: #ececec;
    --color-row-alt: color-mix(in srgb, var(--color-guide) 16%, var(--color-card)); /* zebra rows */
    --color-scroll-thumb: #8a8a8a; /* custom table scrollbar thumb */
    --color-guide: #d4d4d4; /* hairlines, borders, dashed blueprint guides */
    --color-track: color-mix(in srgb, var(--color-guide) 55%, transparent); /* empty bar tracks */
    --color-selection: #fbacbe;
    --color-menu-highlight: var(--color-band-2); /* current / hovered item in plain menus */
    --color-logo-chip: transparent; /* behind org logos; dark mode lights it so black logos show */

    /* ---- Data: severity ---- */
    --color-sev-blocker: #d3121d;
    --color-sev-critical: #e78931;
    --color-sev-major: #ebb036;
    --color-sev-minor: #d4d4d4;

    /* ---- Data: series ---- */
    --color-model-a: var(--color-accent); /* compare: model A, model page: this model */
    --color-model-b: var(--color-ink); /* compare: model B */
    --color-best: var(--color-muted); /* radar: best-per-metric reference */
    --color-better: var(--color-accent); /* drift / diff improvements */
    --color-worse: var(--color-danger); /* drift / diff regressions */
    --color-token-input: var(--color-accent);
    --color-token-output: var(--color-ink);
    --color-token-reasoning: var(--color-sev-major);

    /* ---- Chart chrome ---- */
    --color-tooltip-bg: var(--color-ink);
    --color-tooltip-text: var(--color-surface);
    --color-grid: var(--color-guide);
    --color-axis-text: var(--color-muted);

    /* ---- Patterns ---- */
    --pattern-hatch: repeating-linear-gradient(
        -45deg,
        var(--color-guide) 0 1px,
        transparent 1px 5.657px
    );

    /* ---- Typography ---- */
    --font-display: "Sentient", Georgia, "Times New Roman", serif;
    --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-mono: "Space Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

    --fs-h1: clamp(38px, 4.8vw, 62px);
    --fs-h2: clamp(28px, 3.4vw, 44px);
    --fs-h3: clamp(20px, 2vw, 24px);
    --fs-h4: 18px;
    --fs-stat: clamp(28px, 2.6vw, 40px); /* big numbers in stat cards */
    --fs-lead: clamp(16px, 1.1vw, 18px);
    --fs-body: 16px;
    --fs-body-sm: 15px;
    --fs-sm: 14px;
    --fs-xs: 13px;
    --fs-label: 12px; /* mono labels, eyebrows, table headers */
    --fs-label-sm: 11px; /* mono units */
    --fs-nav: 13px;
    --fs-button: 15px;

    --fw-display: 400; /* Sentient ships thin cuts; never bold headings */
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;

    --lh-display: 1;
    --lh-heading: 1.1;
    --lh-snug: 1.3;
    --lh-body: 1.5;

    --tracking-display: -0.02em;
    --tracking-mono: 0.15em;
    --tracking-mono-tight: 0.05em;

    /* ---- Layout ---- */
    --canvas-max: 1728px;
    --rail: clamp(16px, 4.2vw, 32px); /* x of the blueprint guides */
    --gutter: calc(var(--rail) * 2); /* content side padding */
    --edge: calc((100vw - min(100vw, var(--canvas-max))) / 2);
    --line: calc(var(--edge) + var(--rail));
    --measure: 72ch; /* readable paragraph width */

    --section-pad-y: clamp(40px, 4.4vw, 72px);
    --section-pad-y-lg: clamp(48px, 5vw, 80px);
    --hero-pad-top: clamp(48px, 6vw, 80px);
    --hero-pad-bottom: clamp(24px, 3vw, 40px);
    --stack-gap: clamp(20px, 2.4vw, 32px); /* vertical rhythm inside sections */
    --grid-gap: clamp(16px, 1.6vw, 24px);

    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;

    --card-pad: clamp(20px, 1.8vw, 28px);
    --control-height: 44px; /* inputs, selects, pagination: minimum tap target */
    --button-height: 40px;
    --notch: 14px; /* corner cut on notch buttons */
    --radius: 0; /* the brand is square */
    --header-height: 111px; /* updated at runtime by <app-header> */
    --logo-height: 34px; /* header logo, same size as on sonarsource.com */
    --logo-filter: none;
    --prose-link-decoration: none;

    /* ---- Motion ---- */
    --ease-out: cubic-bezier(0.33, 1, 0.68, 1);
    --ease-smooth: cubic-bezier(0.2, 0.6, 0.2, 1);
    --dur-fast: 0.2s;
    --dur-base: 0.25s;
    --dur-slow: 0.7s;
    --ease-pop: cubic-bezier(0.16, 1, 0.3, 1); /* panels, dropdowns */
    --ease-bar: cubic-bezier(0.2, 0.7, 0.2, 1); /* chart bar grow-in */
    --dur-bar: 900ms;

    /* ---- Sticky tables ---- */
    --shadow-sticky-head: inset 0 -1px 0 var(--color-guide);
    --shadow-sticky-col: 1px 0 0 var(--color-guide);

    /* ---- Layers ---- */
    --z-guides: 0;
    --z-content: 1;
    --z-sticky: 5;
    --z-dropdown: 30;
    --z-chrome: 50;
    --z-tooltip: 60;

    /* ---- Page: leaderboard ---- */
    --lb-fs-th: 12.5px; /* table header labels */
    --lb-fs-unit: 10px; /* unit line under table headers */
    --lb-model-col: 300px; /* sticky model column */
    --lb-model-col-sm: 160px;
    --lb-num-col: 112px; /* metric columns */
    --lb-num-col-sm: 110px;
    --lb-pass-col: 88px; /* pass rate: short label and values, both breakpoints */
    --lb-chart-min-width: 914px; /* before data: 25 bars x 34px + axis; JS resets it per chart */
    --lb-chart-height: 512px; /* caption + plot + rotated labels, reserved before data loads */

    /* ---- Page: model ---- */
    --fs-severity: clamp(22px, 2vw, 26px); /* severity numbers per MLOC */
    --radar-max: 560px; /* overview radar chart width cap */

    /* ---- Page: compare ---- */
    --compare-bar-height: 10px; /* A/B comparison bar thickness */
    --compare-swatch: 10px; /* model A/B square in the picker label */
    --compare-wins-width: 46px; /* reserved "Wins" slot so bars align */

    /* ---- Page: about ---- */

    /* ---- Page: print ---- */
    --print-sheet-width: 210mm; /* A4: the on-screen preview uses the paper width */
    --print-sheet-pad: 16mm; /* screen side padding, matches the @page side margin */
    --print-fs-cover: 56px; /* cover H1 */
    --print-fs-h2: 28px; /* section titles */
    --print-fs-stat: 30px; /* stat card numbers */
    --print-fs-value: 22px; /* value cards, density and severity numbers */
    --print-bar-height: 8px; /* breakdown and token bars */
}

/* ---- Dark mode: follows the OS unless forced with <html data-mode="light|dark"> ---- */
@media (prefers-color-scheme: dark) {
    :root:not([data-mode="light"]) {
        color-scheme: dark;
        --color-ink: #e9ebf0;
        --color-body: #e9ebf0;
        --color-muted: #8a97ac;
        --color-surface: #031426;
        --color-card: #031426;
        --color-band: #0a0a0a;
        --color-band-2: #031426;
        --color-brand: #161616;
        --color-guide: #213851;
        --color-cta-bg: #e9ebf0;
        --color-cta-fg: #0a0a0a;
        --color-footer-bar: #213851;
        --logo-filter: brightness(0) invert(0.925);
        --color-accent: #4c9bf0; /* lifted for AA contrast on the navy surface */
        --color-on-accent: #031426;
        --color-danger: #f0525a; /* lifted for AA contrast; severity fills keep the brand red */
        --prose-link-decoration: underline;
        --color-menu-highlight: #213851;
        --color-logo-chip: #e9ebf0;
    }
}

:root[data-mode="dark"] {
    color-scheme: dark;
    --color-ink: #e9ebf0;
    --color-body: #e9ebf0;
    --color-muted: #8a97ac;
    --color-surface: #031426;
    --color-card: #031426;
    --color-band: #0a0a0a;
    --color-band-2: #031426;
    --color-brand: #161616;
    --color-guide: #213851;
    --color-cta-bg: #e9ebf0;
    --color-cta-fg: #0a0a0a;
    --color-footer-bar: #213851;
    --logo-filter: brightness(0) invert(0.925);
    --color-accent: #4c9bf0;
    --color-on-accent: #031426;
    --color-danger: #f0525a;
    --prose-link-decoration: underline;
    --color-menu-highlight: #213851;
    --color-logo-chip: #e9ebf0;
}