/*
 * Strix Design System tokens for the whole app: black, white, signature
 * yellow, the Strix greys and Poppins (handover design/colors_and_type.css).
 * Every colour in app.css, growth.css and the template <style> blocks reads
 * one of these; a template never carries its own hex.
 *
 * Two deliberate exceptions to "black, white, yellow, grey":
 * - Ratings (good / needs work / poor: Core Web Vitals, Lighthouse, scans)
 *   stay a traffic light, as ONE palette (--rating-*). Clients know red
 *   means poor from Google's own tools (DECISIONS.md).
 * - Charts need several series that stay apart: Strix blue and green,
 *   teal and grey (--chart-*), yellow only as a fill or band, never a line
 *   on white.
 * Team, platform and page-type colours are data, set in Settings, and are
 * not tokens.
 */
:root {
    /* Brand */
    --strix-black: #000000;
    --strix-white: #FFFFFF;
    --strix-yellow: #FFDB32;
    --strix-yellow-soft: #FFF6CC;
    --strix-blue: #3540F8;
    --strix-green: #1C6589;
    --strix-teal: #0097A7;

    /* Greys */
    --strix-grey-50: #F3F3F3;
    --strix-grey-100: #E0E0E0;
    --strix-grey-300: #BBBBBB;
    --strix-grey-500: #8A8A8A;
    --strix-grey-700: #434343;

    /* Ratings: one traffic light for every tool */
    --rating-good: #047857;
    --rating-warn: #B45309;
    --rating-poor: #DC2626;
    --rating-good-bg: color-mix(in srgb, var(--rating-good) 10%, white);
    --rating-warn-bg: color-mix(in srgb, var(--rating-warn) 10%, white);
    --rating-poor-bg: color-mix(in srgb, var(--rating-poor) 10%, white);
    --rating-good-line: color-mix(in srgb, var(--rating-good) 35%, white);
    --rating-warn-line: color-mix(in srgb, var(--rating-warn) 35%, white);
    --rating-poor-line: color-mix(in srgb, var(--rating-poor) 35%, white);
    --rating-none: var(--strix-grey-300);

    /* Chart series, in this order */
    --chart-1: var(--strix-black);
    --chart-2: var(--strix-blue);
    --chart-3: var(--strix-green);
    --chart-4: var(--strix-teal);
    --chart-5: var(--strix-grey-500);

    /* Type and shape */
    --font-sans: 'Poppins', system-ui, -apple-system, sans-serif;
    --font-mono: ui-monospace, 'SF Mono', Menlo, monospace;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-pill: 999px;

    /* Semantic names the templates already use (they were never defined) */
    --color-text: var(--strix-black);
    --color-text-secondary: var(--strix-grey-700);
    --color-text-muted: var(--strix-grey-500);
    --color-border: var(--strix-grey-100);
    --color-bg: var(--strix-grey-50);
    --color-surface: var(--strix-white);
    --color-surface-2: var(--strix-grey-50);
    --color-surface-raised: var(--strix-white);
    --color-primary: var(--strix-black);
    --color-accent: var(--strix-black);
    --color-accent-subtle: var(--strix-yellow-soft);
    --color-danger: var(--rating-poor);
    --color-warning: var(--rating-warn);
    --color-success: var(--rating-good);
}