/* ============================================================
   theme.css — the only file most projects need to edit.
   Every colour, radius, and spacing step in the template
   resolves through these tokens. Change them here and the
   whole UI follows.
   Palette source: DESIGN.md
   ============================================================ */

:root {
    color-scheme: light dark;

    /* --- Brand palette (DESIGN.md) -------------------------
       Primary:   204F8C 153259 0E2940 265FAB F2F2F2 E80F06
       Secondary: FFFFFF F9D746 4F7FE7 F3E3C6 142C49
       These raw values exist so the semantic tokens below can
       reference the palette by name. Prefer the semantic
       tokens in component CSS — never a raw hex.            */
    --brand-blue-700: #204F8C;
    --brand-blue-800: #153259;
    --brand-blue-900: #0E2940;
    --brand-blue-500: #265FAB;
    --brand-blue-300: #4F7FE7;
    --brand-grey-100: #F2F2F2;
    --brand-red: #E80F06;
    --brand-gold: #F9D746;
    --brand-sand: #F3E3C6;
    --brand-navy: #142C49;

    /* --- Surfaces & text --- */
    --bg: var(--brand-grey-100);
    --surface: #ffffff;
    --surface-raised: #ffffff;
    --sunken: rgba(14, 41, 64, 0.05);   /* recessed group bg, e.g. the tab strip */
    --subtle: rgba(242, 242, 242, 0.78); /* table headers, inset list items */
    --ink: var(--brand-blue-900);
    --muted: rgba(14, 41, 64, 0.7);
    --quiet: rgba(14, 41, 64, 0.48);
    --border: rgba(14, 41, 64, 0.14);

    /* --- Accent ---
       --accent        solid fills (buttons, active tab); pairs with --on-accent
       --accent-hover  the fill's hover state
       --accent-strong accent-coloured TEXT on a page background
       Splitting fill from text keeps contrast passing in both
       light and dark, where the two need to move in opposite
       directions. */
    --accent: var(--brand-blue-500);
    --accent-hover: var(--brand-blue-700);
    --accent-strong: var(--brand-blue-700);
    --on-accent: var(--brand-grey-100);

    /* --- Semantic ---
       DESIGN.md's palette contains no green, so --success is
       blue-family by brand constraint. It is deliberately a
       lighter blue than --accent so a success card still reads
       as distinct from a default one. */
    --danger: var(--brand-red);
    --warning: var(--brand-gold);
    --success: var(--brand-blue-300);
    --info: var(--brand-blue-700);

    /* --- Tints ---
       10%-ish washes of a hue over the page. Used for badge
       backgrounds, hover rows, and soft chips. */
    --accent-tint-soft: rgba(38, 95, 171, 0.06);
    --accent-tint: rgba(38, 95, 171, 0.09);
    --accent-tint-strong: rgba(38, 95, 171, 0.16);
    --danger-tint: rgba(232, 15, 6, 0.1);
    --warning-tint: rgba(249, 215, 70, 0.18);
    --success-tint: rgba(79, 127, 231, 0.12);
    --info-tint: rgba(32, 79, 140, 0.1);
    --neutral-tint: rgba(14, 41, 64, 0.07);

    /* --- Background treatment ---
       Vertical hairlines + a soft accent fade from the top.
       Note this is lines only, not a grid — see README. */
    --grid-line: rgba(14, 41, 64, 0.04);
    --grid-size: 24px;
    --bg-fade: rgba(38, 95, 171, 0.1);
    --bg-fade-height: 260px;

    /* --- Elevation --- */
    --shadow: 0 1px 2px rgba(14, 41, 64, 0.08), 0 8px 24px rgba(14, 41, 64, 0.08);
    --shadow-navbar: 0 1px 2px rgba(14, 41, 64, 0.08);
    --accent-lift: 0 8px 24px rgba(38, 95, 171, 0.14);
    --focus: 0 0 0 3px rgba(38, 95, 171, 0.22);
    --scrim: rgba(14, 41, 64, 0.54);

    /* --- Typography ---
       Persian → Vazirmatn, English → Ubuntu (DESIGN.md).
       Body sits at 300 (Light) with a slight negative track. */
    --font: "Ubuntu", "Vazirmatn", "Segoe UI", sans-serif;
    --font-weight-body: 300;
    --font-weight-medium: 500;
    --font-weight-bold: 700;
    --tracking: -0.01em;
    --tracking-tight: -0.03em;
    --tracking-caps: 0.04em;

    --text-xs: 10px;
    --text-sm: 11px;
    --text-label: 12px;
    --text-base: 13px;
    --text-md: 14px;
    --text-lg: 18px;
    --text-stat: clamp(30px, 3.6vw, 44px);

    /* --- Spacing ---
       Horizon's informal 8/10/12/14/16/18/22 rhythm, named. */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 10px;
    --space-4: 12px;
    --space-5: 16px;
    --space-6: 22px;
    --space-7: 44px;

    /* --- Radius --- */
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;
    --radius-xl: 12px;
    --radius-pill: 999px;

    /* --- Chrome --- */
    --navbar-height: 68px;
    --container-max: 1460px;
    --logo-size: 24px;
    --motion: 120ms ease;

    /* --- Satisfaction ramp (Ceilometer) ---
       Score 1→5. DESIGN.md's palette contains no green, so this runs
       red → amber → gold → light blue → blue rather than the usual
       red → green. That ordering is NOT self-evident from hue, so the
       widget always pairs a colour with the filled-star count and a
       text label — never colour alone (WCAG 1.4.1).

       Two sets, because two WCAG thresholds apply: star fills are
       graphics (3:1, SC 1.4.11), the label is text (4.5:1, SC 1.4.3).
       Brand gold #F9D746 measures 1.42:1 on white — unusable on light
       backgrounds for either purpose — so light mode substitutes a
       darkened gold. Verified by scripts/check_contrast.py; re-run it
       if you touch any value here. */
    --score-1: var(--brand-red);
    --score-2: #E8720B;
    --score-3: #B8860B;
    --score-4: var(--brand-blue-300);
    --score-5: var(--brand-blue-500);

    --score-1-text: #D00E05;
    --score-2-text: #A85208;
    --score-3-text: #7A5D0C;
    --score-4-text: #2F5FD0;
    --score-5-text: var(--brand-blue-500);

    --star-empty: rgba(14, 41, 64, 0.22);
}

/* ============================================================
   Dark mode
   Only the tokens change — no component CSS is dark-aware.
   Values are derived from the brand palette rather than
   invented: the navy primaries become surfaces and F2F2F2
   becomes ink.
   ============================================================ */

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg: var(--brand-blue-900);
        --surface: var(--brand-navy);
        --surface-raised: var(--brand-blue-800);
        --sunken: rgba(242, 242, 242, 0.06);
        --subtle: rgba(242, 242, 242, 0.04);
        --ink: var(--brand-grey-100);
        --muted: rgba(242, 242, 242, 0.72);
        --quiet: rgba(242, 242, 242, 0.5);
        --border: rgba(242, 242, 242, 0.14);

        /* Fill stays mid-blue so --on-accent keeps its contrast;
           accent TEXT lightens so it clears the dark ground. */
        --accent: var(--brand-blue-500);
        --accent-hover: #3A72C0;
        --accent-strong: #7FA3EF;
        --on-accent: var(--brand-grey-100);

        --danger: #FF5A52;
        --warning: var(--brand-gold);
        --success: var(--brand-blue-300);
        --info: #7FA3EF;

        --accent-tint-soft: rgba(79, 127, 231, 0.08);
        --accent-tint: rgba(79, 127, 231, 0.14);
        --accent-tint-strong: rgba(79, 127, 231, 0.24);
        --danger-tint: rgba(255, 90, 82, 0.16);
        --warning-tint: rgba(249, 215, 70, 0.16);
        --success-tint: rgba(79, 127, 231, 0.18);
        --info-tint: rgba(127, 163, 239, 0.16);
        --neutral-tint: rgba(242, 242, 242, 0.1);

        --grid-line: rgba(242, 242, 242, 0.04);
        --bg-fade: rgba(79, 127, 231, 0.12);

        --shadow: 0 1px 2px rgba(0, 0, 0, 0.32), 0 8px 24px rgba(0, 0, 0, 0.28);
        --shadow-navbar: 0 1px 2px rgba(0, 0, 0, 0.32);
        --accent-lift: 0 8px 24px rgba(0, 0, 0, 0.36);
        --focus: 0 0 0 3px rgba(127, 163, 239, 0.35);
        --scrim: rgba(5, 16, 26, 0.66);

        /* Satisfaction ramp, lightened for dark surfaces. Brand gold
           works here (9.98:1 on navy); only score 5 needs a lighter
           variant to clear 4.5:1 as text. */
        --score-1: #FF6B63;
        --score-2: #FF9A4D;
        --score-3: var(--brand-gold);
        --score-4: #7BA3F2;
        --score-5: var(--brand-blue-300);

        --score-1-text: #FF6B63;
        --score-2-text: #FF9A4D;
        --score-3-text: var(--brand-gold);
        --score-4-text: #7BA3F2;
        --score-5-text: #8FB4F5;

        --star-empty: rgba(242, 242, 242, 0.24);
    }
}

/* Forced dark, regardless of OS setting: <html data-theme="dark">
   Kept in sync with the block above by hand — there are only
   two of them, and duplicating beats a build step. */
:root[data-theme="dark"] {
    --bg: var(--brand-blue-900);
    --surface: var(--brand-navy);
    --surface-raised: var(--brand-blue-800);
    --sunken: rgba(242, 242, 242, 0.06);
    --subtle: rgba(242, 242, 242, 0.04);
    --ink: var(--brand-grey-100);
    --muted: rgba(242, 242, 242, 0.72);
    --quiet: rgba(242, 242, 242, 0.5);
    --border: rgba(242, 242, 242, 0.14);

    --accent: var(--brand-blue-500);
    --accent-hover: #3A72C0;
    --accent-strong: #7FA3EF;
    --on-accent: var(--brand-grey-100);

    --danger: #FF5A52;
    --warning: var(--brand-gold);
    --success: var(--brand-blue-300);
    --info: #7FA3EF;

    --accent-tint-soft: rgba(79, 127, 231, 0.08);
    --accent-tint: rgba(79, 127, 231, 0.14);
    --accent-tint-strong: rgba(79, 127, 231, 0.24);
    --danger-tint: rgba(255, 90, 82, 0.16);
    --warning-tint: rgba(249, 215, 70, 0.16);
    --success-tint: rgba(79, 127, 231, 0.18);
    --info-tint: rgba(127, 163, 239, 0.16);
    --neutral-tint: rgba(242, 242, 242, 0.1);

    --grid-line: rgba(242, 242, 242, 0.04);
    --bg-fade: rgba(79, 127, 231, 0.12);

    --shadow: 0 1px 2px rgba(0, 0, 0, 0.32), 0 8px 24px rgba(0, 0, 0, 0.28);
    --shadow-navbar: 0 1px 2px rgba(0, 0, 0, 0.32);
    --accent-lift: 0 8px 24px rgba(0, 0, 0, 0.36);
    --focus: 0 0 0 3px rgba(127, 163, 239, 0.35);
    --scrim: rgba(5, 16, 26, 0.66);

    /* Satisfaction ramp, lightened for dark surfaces. Kept in sync with
       the media-query block above by hand. */
    --score-1: #FF6B63;
    --score-2: #FF9A4D;
    --score-3: var(--brand-gold);
    --score-4: #7BA3F2;
    --score-5: var(--brand-blue-300);

    --score-1-text: #FF6B63;
    --score-2-text: #FF9A4D;
    --score-3-text: var(--brand-gold);
    --score-4-text: #7BA3F2;
    --score-5-text: #8FB4F5;

    --star-empty: rgba(242, 242, 242, 0.24);
}