/*
 * Dokino Design Tokens
 * Material Design 3 inspired token system built on the Dokino blue brand
 * (sampled from static/img/dokimo_icon.png: #2080F0 family).
 *
 * Theme switching is handled by a `data-theme="dark"` attribute on <html>
 * (set by an inline script before first paint). Light values live on :root.
 */

:root {
    color-scheme: light;

    /* Brand seed */
    --brand-50: #eef5ff;
    --brand-100: #d9e7ff;
    --brand-200: #bcd6ff;
    --brand-300: #8ebcff;
    --brand-400: #5998ff;
    --brand-500: #2080f0;
    --brand-600: #1467d6;
    --brand-700: #0f52ad;
    --brand-800: #0d448a;
    --brand-900: #0b3470;
    --brand-950: #072148;

    /* Primary */
    --md-sys-color-primary: #1467d6;
    --md-sys-color-on-primary: #ffffff;
    --md-sys-color-primary-container: #d9e7ff;
    --md-sys-color-on-primary-container: #001b3f;
    --md-sys-color-primary-hover: #0f52ad;
    --md-sys-color-primary-active: #0d448a;

    /* Secondary */
    --md-sys-color-secondary: #51627a;
    --md-sys-color-on-secondary: #ffffff;
    --md-sys-color-secondary-container: #d5e3f7;
    --md-sys-color-on-secondary-container: #0b1c31;

    /* Tertiary */
    --md-sys-color-tertiary: #00696f;
    --md-sys-color-on-tertiary: #ffffff;
    --md-sys-color-tertiary-container: #97f0f6;
    --md-sys-color-on-tertiary-container: #002022;

    /* Semantic status */
    --md-sys-color-success: #146c43;
    --md-sys-color-on-success: #ffffff;
    --md-sys-color-success-container: #d2f2df;
    --md-sys-color-on-success-container: #00210f;
    --md-sys-color-warning: #7a5900;
    --md-sys-color-on-warning: #ffffff;
    --md-sys-color-warning-container: #ffdf9b;
    --md-sys-color-on-warning-container: #261a00;
    --md-sys-color-error: #ba1a1a;
    --md-sys-color-on-error: #ffffff;
    --md-sys-color-error-container: #ffdad6;
    --md-sys-color-on-error-container: #410002;
    --md-sys-color-info: #0b57d0;
    --md-sys-color-on-info: #ffffff;
    --md-sys-color-info-container: #d7e7ff;
    --md-sys-color-on-info-container: #001b3f;

    /* Surfaces */
    --md-sys-color-background: #f7f9fd;
    --md-sys-color-on-background: #191c20;
    --md-sys-color-surface: #ffffff;
    --md-sys-color-on-surface: #191c20;
    --md-sys-color-surface-variant: #e1e6ee;
    --md-sys-color-on-surface-variant: #44474e;
    --md-sys-color-surface-container-lowest: #ffffff;
    --md-sys-color-surface-container-low: #f2f5fb;
    --md-sys-color-surface-container: #ecf0f8;
    --md-sys-color-surface-container-high: #e6ebf4;
    --md-sys-color-surface-container-highest: #dfe5ef;
    --md-sys-color-inverse-surface: #2e3135;
    --md-sys-color-inverse-on-surface: #f0f2f7;

    /* Lines & outlines */
    --md-sys-color-outline: #73777f;
    --md-sys-color-outline-variant: #c6c9d2;
    --md-sys-color-divider: #e3e7ee;

    /* Interactive helpers */
    --md-sys-color-focus-ring: #2080f0;
    --md-sys-color-hover-overlay: rgb(20 103 214 / 8%);
    --md-sys-color-pressed-overlay: rgb(20 103 214 / 14%);
    --md-sys-color-scrim: rgb(10 15 25 / 48%);
    --md-sys-color-shadow: rgb(15 30 60 / 12%);
    --md-sys-color-code-bg: #f3f5f9;

    /* Elevation (M3-like shadows) */
    --md-sys-elevation-1: 0 1px 2px rgb(15 30 60 / 8%), 0 1px 3px 1px rgb(15 30 60 / 6%);
    --md-sys-elevation-2: 0 1px 2px rgb(15 30 60 / 10%), 0 2px 6px 2px rgb(15 30 60 / 8%);
    --md-sys-elevation-3: 0 1px 3px rgb(15 30 60 / 12%), 0 4px 12px 4px rgb(15 30 60 / 10%);
    --md-sys-elevation-4: 0 2px 4px rgb(15 30 60 / 14%), 0 8px 24px 6px rgb(15 30 60 / 12%);

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

    /* Spacing scale */
    --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;
    --space-16: 64px;

    /* Typography */
    --font-fa: "Vazirmatn", "Segoe UI", Tahoma, system-ui, sans-serif;
    --font-mono: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;

    --text-display-lg: 2rem;
    --text-display-md: 1.75rem;
    --text-display-sm: 1.5rem;
    --text-headline-md: 1.375rem;
    --text-headline-sm: 1.25rem;
    --text-title-lg: 1.125rem;
    --text-title-md: 1rem;
    --text-title-sm: 0.9375rem;
    --text-body-lg: 1rem;
    --text-body-md: 0.9375rem;
    --text-body-sm: 0.875rem;
    --text-label-lg: 0.875rem;
    --text-label-md: 0.8125rem;
    --text-label-sm: 0.75rem;

    --leading-tight: 1.4;
    --leading-normal: 1.75;
    --leading-relaxed: 1.9;

    /* Layout */
    --layout-max-width: 1200px;
    --layout-sidebar-width: 264px;
    --layout-header-height: 64px;
    --layout-topbar-height: 64px;

    /* Motion */
    --motion-fast: 120ms;
    --motion-medium: 220ms;
    --motion-slow: 320ms;
    --motion-easing: cubic-bezier(0.2, 0, 0, 1);
}

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

    --md-sys-color-primary: #a9c7ff;
    --md-sys-color-on-primary: #003063;
    --md-sys-color-primary-container: #114b95;
    --md-sys-color-on-primary-container: #d9e7ff;
    --md-sys-color-primary-hover: #c2d7ff;
    --md-sys-color-primary-active: #d9e7ff;

    --md-sys-color-secondary: #b9c8da;
    --md-sys-color-on-secondary: #233142;
    --md-sys-color-secondary-container: #39485a;
    --md-sys-color-on-secondary-container: #d5e3f7;

    --md-sys-color-tertiary: #7dd4da;
    --md-sys-color-on-tertiary: #00363a;
    --md-sys-color-tertiary-container: #004f54;
    --md-sys-color-on-tertiary-container: #97f0f6;

    --md-sys-color-success: #8ed6ab;
    --md-sys-color-on-success: #00391c;
    --md-sys-color-success-container: #0d4a2a;
    --md-sys-color-on-success-container: #d2f2df;
    --md-sys-color-warning: #f0c75e;
    --md-sys-color-on-warning: #3f2e00;
    --md-sys-color-warning-container: #5d4600;
    --md-sys-color-on-warning-container: #ffdf9b;
    --md-sys-color-error: #ffb4ab;
    --md-sys-color-on-error: #690005;
    --md-sys-color-error-container: #93000a;
    --md-sys-color-on-error-container: #ffdad6;
    --md-sys-color-info: #a9c7ff;
    --md-sys-color-on-info: #003063;
    --md-sys-color-info-container: #114b95;
    --md-sys-color-on-info-container: #d9e7ff;

    --md-sys-color-background: #10141a;
    --md-sys-color-on-background: #e1e2e8;
    --md-sys-color-surface: #171c23;
    --md-sys-color-on-surface: #e1e2e8;
    --md-sys-color-surface-variant: #43474e;
    --md-sys-color-on-surface-variant: #c4c6d0;
    --md-sys-color-surface-container-lowest: #0e1217;
    --md-sys-color-surface-container-low: #1a2028;
    --md-sys-color-surface-container: #1e242d;
    --md-sys-color-surface-container-high: #242b35;
    --md-sys-color-surface-container-highest: #2a313c;
    --md-sys-color-inverse-surface: #e1e2e8;
    --md-sys-color-inverse-on-surface: #2e3135;

    --md-sys-color-outline: #8e9099;
    --md-sys-color-outline-variant: #43474e;
    --md-sys-color-divider: #2a313c;

    --md-sys-color-focus-ring: #5998ff;
    --md-sys-color-hover-overlay: rgb(169 199 255 / 8%);
    --md-sys-color-pressed-overlay: rgb(169 199 255 / 14%);
    --md-sys-color-scrim: rgb(0 0 0 / 60%);
    --md-sys-color-shadow: rgb(0 0 0 / 32%);
    --md-sys-color-code-bg: #1c232c;

    --md-sys-elevation-1: 0 1px 2px rgb(0 0 0 / 30%), 0 1px 3px 1px rgb(0 0 0 / 22%);
    --md-sys-elevation-2: 0 1px 2px rgb(0 0 0 / 34%), 0 2px 6px 2px rgb(0 0 0 / 26%);
    --md-sys-elevation-3: 0 1px 3px rgb(0 0 0 / 38%), 0 4px 12px 4px rgb(0 0 0 / 30%);
    --md-sys-elevation-4: 0 2px 4px rgb(0 0 0 / 42%), 0 8px 24px 6px rgb(0 0 0 / 34%);
}