/* byeKevin — Design Tokens
 * Cozy Night: deep navy, warm coral accents, muted status colours.
 * Never neon, never cold. This app should feel like a warm lamp at home.
 */

:root,
:root[data-theme="dark"] {
    /* ---- Surfaces ---- */
    --bg:           #0b0f1a;   /* page background */
    --surface-1:    #13192b;   /* cards */
    --surface-2:    #1a2138;   /* raised card, modal */
    --surface-3:    #0f1424;   /* sunken (input) */
    --surface-hover:#1d2540;

    /* ---- Borders ---- */
    --border:       #1f2740;
    --border-soft:  #161c2e;
    --border-strong:#2a3454;

    /* ---- Text ---- */
    --text:         #f3f4f6;
    --text-strong:  #ffffff;
    --text-muted:   #c6cad5;
    --text-dim:     #8a92a8;
    --text-faint:   #5c6478;

    /* ---- Brand / Accent (warm coral, NOT cold blue) ---- */
    --accent:       #ff8a6b;
    --accent-2:     #ffb088;
    --accent-ink:   #1a0f0a;    /* text colour on accent fills */
    --accent-soft:  rgba(255, 138, 107, 0.12);
    --accent-ring:  rgba(255, 138, 107, 0.25);

    /* ---- Status (muted, never neon). Overdue = warm amber, never red ---- */
    --overdue-bg:   rgba(251, 191, 119, 0.10);
    --overdue-fg:   #fbbf77;
    --overdue-ring: rgba(251, 191, 119, 0.28);

    --done-bg:      rgba(111, 207, 148, 0.10);
    --done-fg:      #6fcf94;
    --done-ring:    rgba(111, 207, 148, 0.28);

    --info-bg:      rgba(125, 189, 255, 0.10);
    --info-fg:      #9cc4ee;
    --info-ring:    rgba(125, 189, 255, 0.25);

    --note-bg:      rgba(196, 168, 255, 0.08);
    --note-fg:      #c4a8ff;

    /* ---- Priority (never red; warm gradient low→high) ---- */
    --prio-low-fg:  #9eadc8;
    --prio-low-bg:  rgba(158, 173, 200, 0.10);
    --prio-med-fg:  #e4c084;
    --prio-med-bg:  rgba(228, 192, 132, 0.10);
    --prio-high-fg: #ff9d80;
    --prio-high-bg: rgba(255, 157, 128, 0.12);

    /* ---- Typography ---- */
    --font: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI',
            'Inter', sans-serif;
    --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

    --fs-xs:  12px;
    --fs-sm:  13px;
    --fs-md:  15px;
    --fs-lg:  17px;
    --fs-xl:  20px;
    --fs-2xl: 24px;
    --fs-3xl: 32px;
    --fs-4xl: 40px;

    --fw-regular:  400;
    --fw-medium:   500;
    --fw-semi:     600;
    --fw-bold:     700;

    /* ---- Spacing (8px grid with 4 for tight) ---- */
    --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;

    /* ---- Radii ---- */
    --r-xs:   6px;
    --r-sm:   8px;
    --r-md:   12px;
    --r-lg:   16px;
    --r-xl:   20px;
    --r-full: 999px;

    /* ---- Shadows (soft, layered, never hard) ---- */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.25);
    --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.30);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.35);
    --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.42);
    --shadow-ring: 0 0 0 1px var(--border);
    --shadow-focus: 0 0 0 3px var(--accent-ring);

    /* ---- Motion ---- */
    --ease: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --t-fast: 120ms;
    --t-base: 180ms;
    --t-slow: 280ms;

    /* ---- Layout ---- */
    --app-max: 640px;
    --nav-h: 68px;
    --topbar-h: 56px;

    color-scheme: dark;
}

/* ---- Reduced motion respects the system setting ---- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}