/* ══════════════════════════════════════════════════════════════
   UPTIMO — Shared Design Tokens
   Единый источник переменных для index.html и main.html.
   Значения перенесены из main.html без изменений; добавлены только
   новые токены (отмечены ниже) для редизайна — существующие цвета
   и семантика не меняются.
   ══════════════════════════════════════════════════════════════ */

:root {
    /* Brand colours */
    --primary:   #1e40af;
    --primary-l: #3b82f6;
    --primary-d: #1e3a8a;

    /* Semantic colours */
    --c-success:   #15803d;
    --c-success-l: #22c55e;
    --c-danger:    #b91c1c;
    --c-danger-l:  #ef4444;
    --c-warning:   #b45309;
    --c-warning-l: #f59e0b;

    /* Amber (pending / stopped states) */
    --amber-bg:   #fff7ed;
    --amber-bd:   #fed7aa;
    --amber-text: #92400e;
    --amber-dark: #c2410c;
    --amber-head: #ea580c;

    /* Surface */
    --bg:      #f1f5f9;
    --surface: #ffffff;
    --text:    #1e293b;
    --text-2:  #64748b;
    --text-3:  #94a3b8;
    --border:  #e2e8f0;

    /* Shadows */
    --sh:    0 4px 24px rgba(30,64,175,.10);
    --sh-lg: 0 8px 40px rgba(30,64,175,.18);

    /* Border radius */
    --r:    16px;
    --r-sm: 8px;
    --r-xs: 6px;

    /* Typography scale (5 steps) */
    --t-xs:   .72rem;
    --t-sm:   .8rem;
    --t-base: .875rem;
    --t-md:   1rem;
    --t-lg:   1.15rem;
    --t-xl:   1.5rem;
    --t-dash: 2.3rem;

    /* Spacing scale */
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 20px;
    --sp-6: 24px;
    --sp-8: 32px;

    /* Z-index stack */
    --z-dropdown: 50;
    --z-popover:  60;
    --z-header:   200;
    --z-modal:    1000;
    --z-modal-hi: 1100;
    --z-tip:      2000;
    --z-loading:  998;

    /* Motion */
    --ease: cubic-bezier(.4,0,.2,1);
    --dur:  .2s;

    /* ── Новые токены для редизайна (не переопределяют существующие) ── */
    --shadow-sm: 0 1px 3px rgba(15,23,42,.08), 0 1px 2px rgba(15,23,42,.06);
    --shadow-md: 0 4px 16px rgba(15,23,42,.10), 0 2px 6px rgba(15,23,42,.06);
    --shadow-lg: 0 12px 32px rgba(15,23,42,.14), 0 4px 12px rgba(15,23,42,.08);
    --shadow-hover: 0 16px 40px rgba(30,64,175,.18);
    --glass-bg: rgba(255,255,255,.62);
    --glass-border: rgba(255,255,255,.45);
    --glass-blur: 18px;
    --dur-slow: .4s;
    --dur-slower: .6s;
}

[data-theme="dark"] {
    --bg:        #0f172a;
    --surface:   #1e293b;
    --text:      #e5e9f0;
    --text-2:    #94a3b8;
    --text-3:    #64748b;
    --border:    #334155;
    --sh:        0 4px 24px rgba(0,0,0,.35);
    --sh-lg:     0 8px 40px rgba(0,0,0,.5);
    --amber-bg:  #2a1f0e;
    --amber-bd:  #78350f;
    --amber-text:#fcd34d;
    --amber-dark:#fbbf24;
    --amber-head:#c2410c;

    /* Новые токены — тёмная тема */
    --shadow-sm: 0 1px 3px rgba(0,0,0,.35), 0 1px 2px rgba(0,0,0,.25);
    --shadow-md: 0 4px 16px rgba(0,0,0,.4), 0 2px 6px rgba(0,0,0,.3);
    --shadow-lg: 0 12px 32px rgba(0,0,0,.5), 0 4px 12px rgba(0,0,0,.35);
    --shadow-hover: 0 16px 40px rgba(0,0,0,.55);
    --glass-bg: rgba(30,41,59,.55);
    --glass-border: rgba(148,163,184,.18);
}

/* prefers-color-scheme используется только там, где страница не имеет
   собственного переключателя темы (например, страница логина до входа) —
   не переопределяет [data-theme] атрибут, если он выставлен явно. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]):not([data-theme="dark"]) {
        --bg:        #0f172a;
        --surface:   #1e293b;
        --text:      #e5e9f0;
        --text-2:    #94a3b8;
        --text-3:    #64748b;
        --border:    #334155;
        --sh:        0 4px 24px rgba(0,0,0,.35);
        --sh-lg:     0 8px 40px rgba(0,0,0,.5);
        --shadow-sm: 0 1px 3px rgba(0,0,0,.35), 0 1px 2px rgba(0,0,0,.25);
        --shadow-md: 0 4px 16px rgba(0,0,0,.4), 0 2px 6px rgba(0,0,0,.3);
        --shadow-lg: 0 12px 32px rgba(0,0,0,.5), 0 4px 12px rgba(0,0,0,.35);
        --shadow-hover: 0 16px 40px rgba(0,0,0,.55);
        --glass-bg: rgba(30,41,59,.55);
        --glass-border: rgba(148,163,184,.18);
    }
}