/* ── Design tokens — RoomFlow OS v25 ── */
:root {
    /* ── Backgrounds ── */
    --bg:          #f6f6f8;
    --surface:     #ffffff;
    --surface2:    #f6f6f8;
    --surface3:    #eeeff2;
    --surface-glass: #ffffff;

    /* ── Borders ── */
    --border:      rgba(0,0,0,0.08);
    --border2:     rgba(0,0,0,0.14);

    /* ── Text ── */
    --text:        #0f0f14;
    --text-2:      #3c3c46;
    --text-3:      #8c8c9a;
    --ink:         #000;

    /* ── Accent ── */
    --accent:      #5b3df5;
    --accent-2:    #4028d8;
    --accent-s:    rgba(91,61,245,0.09);
    --accent-g:    rgba(91,61,245,0.16);
    --accent-soft: rgba(91,61,245,0.09);

    /* ── Status palette ── */
    --dirty-bg:  rgba(239,68,68,0.08);   --dirty-bd:  rgba(239,68,68,0.22);   --dirty-tx:  #9b1c1c;   --dirty-d:  #ef4444;
    --clean-bg:  rgba(20,184,166,0.08);  --clean-bd:  rgba(20,184,166,0.22);  --clean-tx:  #115e59;   --clean-d:  #14b8a6;
    --ready-bg:  rgba(34,197,94,0.08);   --ready-bd:  rgba(34,197,94,0.22);   --ready-tx:  #14532d;   --ready-d:  #22c55e;
    --co-bg:     rgba(59,130,246,0.08);  --co-bd:     rgba(59,130,246,0.22);  --co-tx:     #1e40af;   --co-d:     #3b82f6;
    --late-bg:   rgba(249,115,22,0.08);  --late-bd:   rgba(249,115,22,0.22);  --late-tx:   #92400e;   --late-d:   #f97316;
    --bel-bg:    rgba(167,139,250,0.10); --bel-bd:    rgba(167,139,250,0.28); --bel-tx:    #4c1d95;   --bel-d:    #a78bfa;
    --dnd-bg:    rgba(251,191,36,0.09);  --dnd-bd:    rgba(251,191,36,0.28);  --dnd-tx:    #92400e;   --dnd-d:    #fbbf24;
    --oof-bg:    rgba(156,163,175,0.06); --oof-bd:    rgba(156,163,175,0.18); --oof-tx:    #6b7280;   --oof-d:    #9ca3af;
    --prio:      #dc2626;
    --prio-s:    rgba(220,38,38,0.08);

    /* ── Geometry ── */
    --r:    16px;
    --rs:   12px;
    --rx:   8px;
    --sw:   220px;
    --hh:   54px;
    --nb:   68px;
    --sb:   env(safe-area-inset-bottom, 0px);
    --cs:   108px;
    --radius-xs: var(--rx);

    /* ── Shadows ── */
    --sh0: 0 1px 2px rgba(0,0,0,0.06), 0 0 0 1px rgba(0,0,0,0.04);
    --sh1: 0 2px 8px rgba(0,0,0,0.08);
    --sh2: 0 6px 20px rgba(0,0,0,0.10);
    --sh3: 0 16px 40px rgba(0,0,0,0.14);

    /* ── Border alias (no more glass) ── */
    --glass-border: 1px solid var(--border);

    /* ── Easing ── */
    --ease:        cubic-bezier(.16,1,.3,1);
    --ease-spring: cubic-bezier(.22,.68,0,1.1);
    --ease-out:    cubic-bezier(.4,0,.2,1);

    /* ── Typography ── */
    --fd: 'Plus Jakarta Sans', system-ui, sans-serif;
    --fs: 'Plus Jakarta Sans', system-ui, sans-serif;
    --fm: 'DM Mono', 'JetBrains Mono', monospace;
}

/* ── Dark mode ── */
body.dark {
    --bg:          #09090b;
    --surface:     #111113;
    --surface2:    #18181b;
    --surface3:    #222228;
    --surface-glass: #111113;
    --border:      rgba(255,255,255,0.07);
    --border2:     rgba(255,255,255,0.12);
    --text:        rgba(255,255,255,0.92);
    --text-2:      rgba(255,255,255,0.54);
    --text-3:      rgba(255,255,255,0.30);
    --ink:         #000;
    --accent:      #7c6af8;
    --accent-2:    #6655e8;
    --accent-s:    rgba(124,106,248,0.12);
    --accent-g:    rgba(124,106,248,0.20);
    --accent-soft: rgba(124,106,248,0.12);
    --dirty-bg:  rgba(239,68,68,0.12);   --dirty-bd:  rgba(239,68,68,0.30);   --dirty-tx:  #fca5a5; --dirty-d:  #ef4444;
    --clean-bg:  rgba(20,184,166,0.12);  --clean-bd:  rgba(20,184,166,0.30);  --clean-tx:  #99f6e4; --clean-d:  #14b8a6;
    --ready-bg:  rgba(34,197,94,0.12);   --ready-bd:  rgba(34,197,94,0.30);   --ready-tx:  #86efac; --ready-d:  #22c55e;
    --co-bg:     rgba(59,130,246,0.12);  --co-bd:     rgba(59,130,246,0.30);  --co-tx:     #93c5fd; --co-d:     #3b82f6;
    --late-bg:   rgba(249,115,22,0.12);  --late-bd:   rgba(249,115,22,0.30);  --late-tx:   #fdba74; --late-d:   #f97316;
    --bel-bg:    rgba(167,139,250,0.12); --bel-bd:    rgba(167,139,250,0.32); --bel-tx:    #ddd6fe; --bel-d:    #a78bfa;
    --dnd-bg:    rgba(251,191,36,0.12);  --dnd-bd:    rgba(251,191,36,0.32);  --dnd-tx:    #fde68a; --dnd-d:    #fbbf24;
    --oof-bg:    rgba(107,114,128,0.09); --oof-bd:    rgba(107,114,128,0.20); --oof-tx:    rgba(255,255,255,.36); --oof-d: #9ca3af;
    --prio:      #f87171;
    --prio-s:    rgba(248,113,113,.12);
    --sh0: 0 1px 3px rgba(0,0,0,.35);
    --sh1: 0 2px 10px rgba(0,0,0,.45);
    --sh2: 0 6px 22px rgba(0,0,0,.55);
    --sh3: 0 16px 44px rgba(0,0,0,.68);
    --glass-border: 1px solid var(--border);
    color-scheme: dark;
}

/* ── Keyframes ── */
@keyframes fadeUp    { from{opacity: 0; transform: translateY(12px)}
to{opacity: 1; transform: none} }
@keyframes cardIn    { 0%{opacity: 0; transform: scale(.97) translateY(4px)}
100%{opacity: 1; transform: none} }
@keyframes sheetUp   { from{transform: translateY(24px); opacity: 0}
to{transform: none; opacity: 1} }
@keyframes toastIn   { from{opacity: 0; transform: translateY(8px) scale(.96)}
to{opacity: 1; transform: none} }
@keyframes spin      { to{transform: rotate(360deg)} }
@keyframes pBlue     { 0%,100%{box-shadow: 0 0 0 0 rgba(59,130,246,.40)}
50%{box-shadow: 0 0 0 7px rgba(59,130,246,0)} }
@keyframes pRose     { 0%,100%{box-shadow: 0 0 0 0 rgba(249,115,22,.40)}
50%{box-shadow: 0 0 0 7px rgba(249,115,22,0)} }
@keyframes pIndigo   { 0%,100%{box-shadow: 0 0 0 0 rgba(167,139,250,.34)}
50%{box-shadow: 0 0 0 7px rgba(167,139,250,0)} }
@keyframes pRed      { 0%,100%{box-shadow: 0 0 0 0 rgba(220,38,38,.40)}
50%{box-shadow: 0 0 0 7px rgba(220,38,38,0)} }
@keyframes pinBounce { 0%,100%{transform: scale(1)}
40%{transform: scale(.87)}
70%{transform: scale(1.07)} }
@keyframes bulkIn    { from{transform: translateY(100%); opacity: 0}
to{transform: none; opacity: 1} }
@keyframes confetti  { 0%{transform: translateY(-20px) rotate(0); opacity: 1}
100%{transform: translateY(100vh) rotate(720deg); opacity: 0} }
@keyframes shimmer   { 0%{background-position: 200% 0}
100%{background-position: -200% 0} }
@keyframes cleanPulse{ 0%,100%{opacity: 1}
50%{opacity: .5} }
@keyframes dotPop    { 0%{transform: scale(0)}
70%{transform: scale(1.25)}
100%{transform: scale(1)} }
@keyframes fadeIn    { from{opacity: 0}
to{opacity: 1} }
@keyframes slideUp   { from{transform: translateY(20px); opacity: 0}
to{transform: none; opacity: 1} }