/* ==========================================================================
   POLICEOLINGO — DESIGN TOKENS
   Єдине джерело правди для кольорів, типографіки, простору та руху.
   Підключається першим, до всіх інших стилів.
   ========================================================================== */

:root {
    /* ---------- Бренд: приглушений азурно-індиговий ---------- */
    --brand-700: #1E45B8;
    --brand-600: #2B5CE6;
    --brand-500: #4479FF;
    --brand-400: #6D9BFF;
    --brand-300: #9CBAFF;
    --brand-200: #C7D8FF;
    --brand-100: #E0EAFF;
    --brand-050: #EAF0FF;

    /* ---------- Акцент: тепле золото (жетон, XP, стрік) ---------- */
    --gold-600: #D4860A;
    --gold-500: #F5A524;
    --gold-400: #FFBC4C;
    --gold-100: #FFF3DC;

    /* ---------- Стан ---------- */
    --ok-600: #0B8663;
    --ok-500: #0EA37A;
    --ok-400: #34C79B;
    --ok-100: #E1F7F0;

    --err-600: #C43438;
    --err-500: #E5484D;
    --err-400: #F26E72;
    --err-100: #FDECEC;

    --warn-500: #E8912B;
    --warn-100: #FDF0DC;

    /* ---------- Допоміжні відтінки для модулів ---------- */
    --violet-500: #7C5CF5;
    --violet-100: #EEE9FE;
    --teal-500: #12A5C4;
    --teal-100: #DFF4F9;
    --rose-500: #E5568B;
    --rose-100: #FCE7F0;

    /* ---------- Поверхні (світла тема) ---------- */
    --bg: #F6F7FB;
    --bg-sunken: #EEF1F8;
    --surface: #FFFFFF;
    --surface-2: #F9FAFD;
    --surface-nav: rgba(255, 255, 255, 0.86);
    --border: #E3E7F2;
    --border-strong: #CED5E8;

    /* ---------- Текст ---------- */
    --text: #101426;
    --text-2: #4A5270;
    --text-3: #8A92AD;
    --text-on-brand: #FFFFFF;

    /* ---------- Семантичні псевдоніми ---------- */
    --accent: var(--gold-500);
    --accent-soft: var(--gold-100);
    --ok: var(--ok-500);
    --ok-soft: var(--ok-100);
    --err: var(--err-500);
    --err-soft: var(--err-100);
    --brand: var(--brand-600);
    --brand-soft: var(--brand-050);

    /* ---------- Градієнти ---------- */
    --grad-brand: linear-gradient(135deg, #2B5CE6 0%, #6D4AFF 100%);
    --grad-progress: linear-gradient(90deg, #2B5CE6 0%, #19B5D8 100%);
    --grad-streak: linear-gradient(135deg, #F5A524 0%, #E5484D 100%);
    --grad-ok: linear-gradient(135deg, #0EA37A 0%, #34C79B 100%);
    --grad-surface: linear-gradient(180deg, #FFFFFF 0%, #F9FAFD 100%);

    /* Шеврон — фірмовий мотив (лівреї патрульного авто / світловідбивний жилет) */
    --chevron: repeating-linear-gradient(
        115deg,
        rgba(255, 255, 255, 0.00) 0px,
        rgba(255, 255, 255, 0.00) 14px,
        rgba(255, 255, 255, 0.13) 14px,
        rgba(255, 255, 255, 0.13) 28px
    );
    --chevron-gold: repeating-linear-gradient(
        115deg,
        transparent 0px,
        transparent 12px,
        var(--gold-500) 12px,
        var(--gold-500) 24px
    );

    /* ---------- Типографіка ---------- */
    --font-display: 'Unbounded', 'Manrope', system-ui, sans-serif;
    --font-ui: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

    --fs-3xs: 10px;
    --fs-2xs: 11px;
    --fs-xs:  12px;
    --fs-sm:  13px;
    --fs-md:  15px;
    --fs-lg:  17px;
    --fs-xl:  20px;
    --fs-2xl: 24px;
    --fs-3xl: 30px;
    --fs-4xl: 38px;
    --fs-5xl: 48px;

    --lh-tight: 1.15;
    --lh-snug: 1.3;
    --lh-normal: 1.5;
    --lh-relaxed: 1.65;

    --tracking-tight: -0.02em;
    --tracking-wide: 0.04em;
    --tracking-caps: 0.09em;

    /* ---------- Простір (4px база) ---------- */
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 20px;
    --sp-6: 24px;
    --sp-8: 32px;
    --sp-10: 40px;
    --sp-12: 48px;
    --sp-16: 64px;
    --sp-20: 80px;

    /* ---------- Радіуси ---------- */
    --r-xs: 8px;
    --r-sm: 12px;
    --r-md: 16px;
    --r-lg: 22px;
    --r-xl: 28px;
    --r-2xl: 36px;
    --r-pill: 999px;

    /* ---------- Тіні ---------- */
    --sh-xs: 0 1px 2px rgba(16, 20, 38, 0.05);
    --sh-sm: 0 2px 8px rgba(16, 20, 38, 0.06);
    --sh-md: 0 6px 20px rgba(16, 20, 38, 0.08);
    --sh-lg: 0 16px 40px rgba(16, 20, 38, 0.11);
    --sh-xl: 0 28px 70px rgba(16, 20, 38, 0.16);
    --sh-brand: 0 8px 24px rgba(43, 92, 230, 0.28);
    --sh-gold: 0 8px 24px rgba(245, 165, 36, 0.30);
    --sh-inset: inset 0 1px 0 rgba(255, 255, 255, 0.6);

    /* «3D» нижня грань для кнопок і плиток — дає тактильність */
    --lip: 0 4px 0;
    --lip-brand: 0 4px 0 var(--brand-700);
    --lip-ok: 0 4px 0 var(--ok-600);
    --lip-err: 0 4px 0 var(--err-600);
    --lip-surface: 0 4px 0 var(--border);

    /* ---------- Рух ---------- */
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --ease-back: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-spring: cubic-bezier(0.18, 1.34, 0.52, 1);

    --dur-fast: 140ms;
    --dur-base: 220ms;
    --dur-slow: 380ms;
    --dur-slower: 600ms;

    /* ---------- Розміри каркаса ---------- */
    --app-max: 520px;
    --nav-h: 68px;
    --safe-b: env(safe-area-inset-bottom, 0px);
    --safe-t: env(safe-area-inset-top, 0px);

    /* ---------- Шари ---------- */
    --z-nav: 50;
    --z-sheet: 60;
    --z-overlay: 70;
    --z-modal: 80;
    --z-toast: 90;
    --z-boot: 100;

    color-scheme: light;
}

/* ==========================================================================
   ТЕМНА ТЕМА — спроєктована окремо, не інверсія світлої.
   Глибокий індиго, тепліший за холодний slate; бренд і акцент підняті
   по яскравості, щоб тримати контраст на темному тлі.
   ========================================================================== */

[data-theme="dark"] {
    --brand-700: #3A6BFF;
    --brand-600: #5B8CFF;
    --brand-500: #79A3FF;
    --brand-400: #9CBAFF;
    --brand-300: #6E86C4;
    --brand-200: #3E4E86;
    --brand-100: #27335C;
    --brand-050: #1C2547;

    --gold-600: #FFC96B;
    --gold-500: #FFB84D;
    --gold-400: #FFD08A;
    --gold-100: #33280F;

    --ok-600: #4FE0B4;
    --ok-500: #2DD4A0;
    --ok-400: #6BE8C2;
    --ok-100: #0D3A2E;

    --err-600: #FF9092;
    --err-500: #FF6B6E;
    --err-400: #FFA2A4;
    --err-100: #3D1E20;

    --warn-500: #FFB84D;
    --warn-100: #34280F;

    --violet-500: #9B82FF;
    --violet-100: #2A2352;
    --teal-500: #3FC2DD;
    --teal-100: #12313C;
    --rose-500: #FF7FAE;
    --rose-100: #3B1E2D;

    --bg: #0C1020;
    --bg-sunken: #080B17;
    --surface: #141A2E;
    --surface-2: #1B2340;
    --surface-nav: rgba(20, 26, 46, 0.88);
    --border: #262F4D;
    --border-strong: #38446B;

    --text: #EDF0F9;
    --text-2: #A3ACC8;
    --text-3: #6E7796;
    --text-on-brand: #0C1020;

    --grad-brand: linear-gradient(135deg, #3A6BFF 0%, #7E5BFF 100%);
    --grad-progress: linear-gradient(90deg, #5B8CFF 0%, #3FC2DD 100%);
    --grad-streak: linear-gradient(135deg, #FFB84D 0%, #FF6B6E 100%);
    --grad-ok: linear-gradient(135deg, #2DD4A0 0%, #6BE8C2 100%);
    --grad-surface: linear-gradient(180deg, #1B2340 0%, #141A2E 100%);

    --chevron: repeating-linear-gradient(
        115deg,
        rgba(255, 255, 255, 0.00) 0px,
        rgba(255, 255, 255, 0.00) 14px,
        rgba(255, 255, 255, 0.08) 14px,
        rgba(255, 255, 255, 0.08) 28px
    );

    --sh-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
    --sh-sm: 0 2px 8px rgba(0, 0, 0, 0.35);
    --sh-md: 0 6px 20px rgba(0, 0, 0, 0.45);
    --sh-lg: 0 16px 40px rgba(0, 0, 0, 0.55);
    --sh-xl: 0 28px 70px rgba(0, 0, 0, 0.65);
    --sh-brand: 0 8px 24px rgba(58, 107, 255, 0.35);
    --sh-gold: 0 8px 24px rgba(255, 184, 77, 0.22);
    --sh-inset: inset 0 1px 0 rgba(255, 255, 255, 0.05);

    --lip-brand: 0 4px 0 #1E3F8F;
    --lip-ok: 0 4px 0 #17836A;
    --lip-err: 0 4px 0 #B04446;
    --lip-surface: 0 4px 0 var(--border);

    color-scheme: dark;
}