/* ==========================================================================
   theme.css — Design tokens (Material 3 / semantic)
   Light + dark. Every colour, radius, elevation and duration lives here.
   Components never hard-code a hex value; they read these tokens.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Font
   NOTE: the bundled IRANSans.woff2 is a single static weight. It is declared
   as font-weight:400 so the browser applies *synthetic* bold for 600/700.
   Declaring a range (e.g. `100 900`) on a static face makes the browser skip
   synthesis entirely — every heading then renders identical to body text and
   the whole UI looks flat. For real bold, add IRANSans-Bold.woff2 and a second
   @font-face with font-weight:700.
   -------------------------------------------------------------------------- */
@font-face {
    font-family: "CRMFont";
    src: url("../assets/fonts/IRANSans.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

:root {
    color-scheme: light;

    --font-sans: "CRMFont", "Vazirmatn", "IRANSans", "Segoe UI", Tahoma, system-ui, sans-serif;

    /* ---------------- Primary ---------------- */
    --primary: #00658f;
    --on-primary: #ffffff;
    --primary-container: #cbe6ff;
    --on-primary-container: #001e2e;
    --primary-hover: #005578;
    --primary-active: #004764;
    --primary-subtle: #e8f3fb;

    /* ---------------- Secondary ---------------- */
    --secondary: #4d6070;
    --on-secondary: #ffffff;
    --secondary-container: #d3e5f5;
    --on-secondary-container: #0c1d29;
    --secondary-hover: #dcebf8;

    /* ---------------- Tertiary (accent for variety) ---------------- */
    --tertiary: #565a86;
    --on-tertiary: #ffffff;
    --tertiary-container: #e1e2ff;
    --on-tertiary-container: #131538;

    /* ---------------- Surfaces (M3 tonal ladder) ---------------- */
    --surface: #f7f9fc;
    --surface-container-lowest: #ffffff;
    --surface-container-low: #f1f4f9;
    --surface-container: #ebeef5;
    --surface-container-high: #e5e8ef;
    --surface-container-highest: #dee2e9;
    --on-surface: #181c1e;
    --on-surface-variant: #3f484e;
    --text-muted: #5a6268;
    --inverse-surface: #2d3133;
    --inverse-on-surface: #eff1f3;

    /* ---------------- Outlines ---------------- */
    --outline: #6f787e;
    --outline-variant: #c2c8ce;
    --hairline: #e3e7ec;

    /* ---------------- Semantic ---------------- */
    --success: #11612c;
    --success-container: #a8f2b6;
    --on-success-container: #00210b;
    --warning: #7d4e00;
    --warning-container: #ffddb0;
    --on-warning-container: #281800;
    --error: #b3261e;
    --error-container: #ffdad6;
    --on-error-container: #410e0b;
    /* Ink on a solid --error fill. */
    --on-error: #ffffff;
    --info: #0b5c8a;
    --info-container: #cbe6ff;
    --on-info-container: #001e2e;
    --neutral-container: #e5e8ef;
    --on-neutral-container: #3f484e;

    /* ---------------- Scrim / overlay ---------------- */
    --scrim: rgba(16, 20, 22, 0.45);
    --hover-wash: rgba(0, 101, 143, 0.06);
    --press-wash: rgba(0, 101, 143, 0.12);

    /* ---------------- Elevation ---------------- */
    --elevation-1: 0 1px 2px rgba(16, 20, 22, 0.06), 0 1px 3px 1px rgba(16, 20, 22, 0.05);
    --elevation-2: 0 1px 2px rgba(16, 20, 22, 0.08), 0 2px 6px 2px rgba(16, 20, 22, 0.06);
    --elevation-3: 0 2px 4px rgba(16, 20, 22, 0.08), 0 4px 10px 3px rgba(16, 20, 22, 0.08);
    --elevation-4: 0 4px 8px rgba(16, 20, 22, 0.10), 0 8px 20px 6px rgba(16, 20, 22, 0.10);

    /* ---------------- Shape ---------------- */
    --r-xs: 6px;
    --r-sm: 10px;
    --r-md: 14px;
    --r-lg: 20px;
    --r-xl: 28px;
    --r-full: 999px;

    /* ---------------- Spacing ---------------- */
    --sp-1: 0.25rem;
    --sp-2: 0.5rem;
    --sp-3: 0.75rem;
    --sp-4: 1rem;
    --sp-5: 1.25rem;
    --sp-6: 1.5rem;
    --sp-7: 2rem;
    --sp-8: 2.5rem;

    /* ---------------- Type scale ---------------- */
    --fs-2xs: 0.75rem;
    --fs-xs: 0.8125rem;
    --fs-sm: 0.875rem;
    --fs-body: 0.9375rem;
    --fs-h3: 1.0625rem;
    --fs-h2: 1.25rem;
    --fs-h1: 1.5rem;
    --fs-display: 1.875rem;

    /* ---------------- Motion ---------------- */
    --motion-fast: 120ms;
    --motion-base: 200ms;
    --motion-slow: 320ms;

    /* ---------------- Masks ---------------- */
    --check-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E");
    --ease-standard: cubic-bezier(0.2, 0, 0, 1);
    --ease-emphasized: cubic-bezier(0.3, 0, 0.1, 1);

    /* ---------------- Layout ---------------- */
    --sidebar-width: 264px;
    --sidebar-collapsed-width: 76px;
    --header-height: 64px;
    --bottom-nav-height: 60px;
    --content-max: 1440px;

    /* ======================================================================
       Chart tokens
       Categorical slots are the validated reference palette, in fixed order —
       never cycled, never re-ordered, never assigned by rank.
       Slots 1-3 validate on the all-pairs list; slot 4+ only on adjacent pairs.
       ====================================================================== */
    --chart-surface: #ffffff;
    --chart-grid: #e6e9ee;
    --chart-axis: #c9cfd6;
    --chart-ink: #181c1e;
    --chart-ink-muted: #5a6268;
    --chart-ink-faint: #8a9199;

    --series-1: #2a78d6;   /* blue    */
    --series-2: #eb6834;   /* orange  */
    --series-3: #1baf7a;   /* aqua    */
    --series-4: #eda100;   /* yellow  */
    --series-5: #e87ba4;   /* magenta */
    --series-6: #008300;   /* green   */
    --series-7: #4a3aa7;   /* violet  */
    --series-8: #e34948;   /* red     */

    /* Ordinal ramp (funnel stages, tiers). On light, start no lighter
       than step 250 so every step clears 2:1 against the surface. */
    --ordinal-1: #86b6ef;
    --ordinal-2: #3987e5;
    --ordinal-3: #1c5cab;
    --ordinal-4: #104281;

    /* Status — reserved. Never reused as a series colour.
       Each always ships with an icon + label, never colour alone. */
    --status-good: #0ca30c;
    --status-warning: #fab219;
    --status-serious: #ec835a;
    --status-critical: #d03b3b;
    --delta-up-good: #006300;
    --delta-down-bad: #b3261e;
}

/* ==========================================================================
   Dark theme
   Declared under BOTH scopes: the media query covers the OS setting, the
   [data-theme] scope covers the in-app toggle. The :not() guard lets an
   explicit light stamp win over OS-dark.
   ========================================================================== */
@media (prefers-color-scheme: dark) {
    :root:where(:not([data-theme="light"])) {
        color-scheme: dark;

        --primary: #8cceff;
        --on-primary: #00344c;
        --primary-container: #004c6d;
        --on-primary-container: #cbe6ff;
        --primary-hover: #a5d8ff;
        --primary-active: #bde3ff;
        --primary-subtle: #10262f;

        --secondary: #b7c9d9;
        --on-secondary: #22323f;
        --secondary-container: #35485a;
        --on-secondary-container: #d3e5f5;
        --secondary-hover: #2b3d4c;

        --tertiary: #bfc2f5;
        --on-tertiary: #282a4d;
        --tertiary-container: #3f4269;
        --on-tertiary-container: #e1e2ff;

        --surface: #0f1416;
        --surface-container-lowest: #0a0e10;
        --surface-container-low: #171c1e;
        --surface-container: #1b2023;
        --surface-container-high: #262b2e;
        --surface-container-highest: #313639;
        --on-surface: #dfe3e5;
        --on-surface-variant: #bfc8ce;
        --text-muted: #a8b1b7;
        --inverse-surface: #dfe3e5;
        --inverse-on-surface: #2d3133;

        --outline: #899298;
        --outline-variant: #3f484e;
        --hairline: #2a3033;

        --success: #8bd99b;
        --success-container: #0a4a1f;
        --on-success-container: #a8f2b6;
        --warning: #f5bd6a;
        --warning-container: #5c3a00;
        --on-warning-container: #ffddb0;
        --error: #ffb4ab;
        --error-container: #8c1d18;
        --on-error-container: #ffdad6;
        --on-error: #690005;
        --info: #8cceff;
        --info-container: #004c6d;
        --on-info-container: #cbe6ff;
        --neutral-container: #313639;
        --on-neutral-container: #dfe3e5;

        --scrim: rgba(0, 0, 0, 0.6);
        --hover-wash: rgba(140, 206, 255, 0.08);
        --press-wash: rgba(140, 206, 255, 0.14);

        --elevation-1: 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 3px 1px rgba(0, 0, 0, 0.3);
        --elevation-2: 0 1px 2px rgba(0, 0, 0, 0.45), 0 2px 6px 2px rgba(0, 0, 0, 0.35);
        --elevation-3: 0 2px 4px rgba(0, 0, 0, 0.5), 0 4px 10px 3px rgba(0, 0, 0, 0.4);
        --elevation-4: 0 4px 8px rgba(0, 0, 0, 0.55), 0 8px 20px 6px rgba(0, 0, 0, 0.45);

        /* Dark chart steps: the same eight hues re-stepped for the dark
           surface — selected, not an automatic flip. */
        --chart-surface: #1a1f22;
        --chart-grid: #2c3236;
        --chart-axis: #3f4549;
        --chart-ink: #dfe3e5;
        --chart-ink-muted: #a8b1b7;
        --chart-ink-faint: #8a9199;

        --series-1: #3987e5;
        --series-2: #d95926;
        --series-3: #199e70;
        --series-4: #c98500;
        --series-5: #d55181;
        --series-6: #008300;
        --series-7: #9085e9;
        --series-8: #e66767;

        /* On dark, the ramp runs light→dark no darker than step 600. */
        --ordinal-1: #184f95;
        --ordinal-2: #2a78d6;
        --ordinal-3: #6da7ec;
        --ordinal-4: #b7d3f6;

        --delta-up-good: #0ca30c;
        --delta-down-bad: #ffb4ab;
    }
}

:root[data-theme="dark"] {
    color-scheme: dark;

    --primary: #8cceff;
    --on-primary: #00344c;
    --primary-container: #004c6d;
    --on-primary-container: #cbe6ff;
    --primary-hover: #a5d8ff;
    --primary-active: #bde3ff;
    --primary-subtle: #10262f;

    --secondary: #b7c9d9;
    --on-secondary: #22323f;
    --secondary-container: #35485a;
    --on-secondary-container: #d3e5f5;
    --secondary-hover: #2b3d4c;

    --tertiary: #bfc2f5;
    --on-tertiary: #282a4d;
    --tertiary-container: #3f4269;
    --on-tertiary-container: #e1e2ff;

    --surface: #0f1416;
    --surface-container-lowest: #0a0e10;
    --surface-container-low: #171c1e;
    --surface-container: #1b2023;
    --surface-container-high: #262b2e;
    --surface-container-highest: #313639;
    --on-surface: #dfe3e5;
    --on-surface-variant: #bfc8ce;
    --text-muted: #a8b1b7;
    --inverse-surface: #dfe3e5;
    --inverse-on-surface: #2d3133;

    --outline: #899298;
    --outline-variant: #3f484e;
    --hairline: #2a3033;

    --success: #8bd99b;
    --success-container: #0a4a1f;
    --on-success-container: #a8f2b6;
    --warning: #f5bd6a;
    --warning-container: #5c3a00;
    --on-warning-container: #ffddb0;
    --error: #ffb4ab;
    --error-container: #8c1d18;
    --on-error-container: #ffdad6;
    --on-error: #690005;
    --info: #8cceff;
    --info-container: #004c6d;
    --on-info-container: #cbe6ff;
    --neutral-container: #313639;
    --on-neutral-container: #dfe3e5;

    --scrim: rgba(0, 0, 0, 0.6);
    --hover-wash: rgba(140, 206, 255, 0.08);
    --press-wash: rgba(140, 206, 255, 0.14);

    --elevation-1: 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 3px 1px rgba(0, 0, 0, 0.3);
    --elevation-2: 0 1px 2px rgba(0, 0, 0, 0.45), 0 2px 6px 2px rgba(0, 0, 0, 0.35);
    --elevation-3: 0 2px 4px rgba(0, 0, 0, 0.5), 0 4px 10px 3px rgba(0, 0, 0, 0.4);
    --elevation-4: 0 4px 8px rgba(0, 0, 0, 0.55), 0 8px 20px 6px rgba(0, 0, 0, 0.45);

    --chart-surface: #1a1f22;
    --chart-grid: #2c3236;
    --chart-axis: #3f4549;
    --chart-ink: #dfe3e5;
    --chart-ink-muted: #a8b1b7;
    --chart-ink-faint: #8a9199;

    --series-1: #3987e5;
    --series-2: #d95926;
    --series-3: #199e70;
    --series-4: #c98500;
    --series-5: #d55181;
    --series-6: #008300;
    --series-7: #9085e9;
    --series-8: #e66767;

    --ordinal-1: #184f95;
    --ordinal-2: #2a78d6;
    --ordinal-3: #6da7ec;
    --ordinal-4: #b7d3f6;

    --delta-up-good: #0ca30c;
    --delta-down-bad: #ffb4ab;
}

/* Respect the OS reduced-motion setting everywhere. */
@media (prefers-reduced-motion: reduce) {
    :root {
        --motion-fast: 1ms;
        --motion-base: 1ms;
        --motion-slow: 1ms;
    }
    *,
    *::before,
    *::after {
        animation-duration: 1ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 1ms !important;
        scroll-behavior: auto !important;
    }
}