/* ===========================================================
   STUDY BUDDIES DESIGN SYSTEM v2
=========================================================== */

:root{

    /* ===========================
       BRAND COLORS
    =========================== */

    --blueprint:#14294C;
    --blueprint-light:#1D3B6B;
    --navy:#081729;

    --gold:#5B95FF;
    --gold-light:#8AB6FF;

    --cream:#081729;
    --white:#FFFFFF;

    /* ===========================
       DARK SURFACES
    =========================== */

    --surface-1:#081729;
    --surface-2:#0E2038;
    --surface-3:#142B4D;
    --surface-4:#1D3B6B;

    --border:#305480;

    /* ===========================
       TEXT
    =========================== */

    --text-primary:#FFFFFF;
    --text-secondary:#D8E4F2;
    --text-muted:#A7B8CC;

    /* ===========================
       STATUS COLORS
    =========================== */

    --success:#2BB673;
    --warning:#F2B84B;
    --danger:#E65B5B;
    --info:#5DA4FF;

    /* ===========================
       LEGACY GRAYS
       (kept so existing CSS keeps working)
    =========================== */
/* ===========================
   LEGACY GRAYS
   Used by older light sections
=========================== */

--gray-50:#FAFAFA;
--gray-100:#F3F4F6;
--gray-200:#E5E7EB;
--gray-300:#D1D5DB;
--gray-400:#9CA3AF;
--gray-500:#6B7280;
--gray-600:#4B5563;
--gray-700:#374151;
--gray-800:#1F2937;
--gray-900:#111827;

    /* ===========================
       FONTS
    =========================== */

    --font-main:'Inter',sans-serif;
    --font-heading:'Zilla Slab',serif;
    --font-code:'JetBrains Mono',monospace;

    /* ===========================
       FONT SIZES
    =========================== */

    --text-xs:.75rem;
    --text-sm:.875rem;
    --text-md:1rem;
    --text-lg:1.125rem;
    --text-xl:1.25rem;
    --text-2xl:1.5rem;
    --text-3xl:2rem;
    --text-4xl:2.5rem;
    --text-5xl:3.5rem;

    /* ===========================
       SPACING
    =========================== */

    --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;

    /* ===========================
       BORDER RADIUS
    =========================== */

    --radius-sm:8px;
    --radius-md:14px;
    --radius-lg:20px;
    --radius-xl:28px;
    --radius-pill:999px;

    /* ===========================
       SHADOWS
    =========================== */

    --shadow-sm:
        0 6px 18px rgba(0,0,0,.20);

    --shadow-md:
        0 14px 34px rgba(0,0,0,.28);

    --shadow-lg:
        0 24px 60px rgba(0,0,0,.40);

    /* ===========================
       TRANSITIONS
    =========================== */

    --transition-fast:.18s ease;
    --transition:.28s ease;
    --transition-slow:.45s ease;

    /* ===========================
       SIDEBAR
    =========================== */

    --sidebar-width:300px;

    /* ===========================
       DRAWER
    =========================== */

    --drawer-width:620px;

    /* ===========================
       CONTENT
    =========================== */

    --content-width:1350px;

}

:root[data-theme="purple"]{
    --blueprint:#21163D;
    --blueprint-light:#39245F;
    --navy:#120C25;
    --gold:#A78BFA;
    --gold-light:#C4B5FD;
    --cream:#120C25;
    --surface-1:#120C25;
    --surface-2:#1B1233;
    --surface-3:#281A47;
    --surface-4:#39245F;
    --border:#604A83;
    --success:#34D399;
    --info:#A78BFA;
}

:root[data-theme="forest"]{
    --blueprint:#12372E;
    --blueprint-light:#1D5143;
    --navy:#071F1A;
    --gold:#34D399;
    --gold-light:#6EE7B7;
    --cream:#071F1A;
    --surface-1:#071F1A;
    --surface-2:#0D2B24;
    --surface-3:#12372E;
    --surface-4:#1D5143;
    --border:#356B5C;
    --success:#6EE7B7;
    --info:#5EEAD4;
}

:root[data-theme="sunset"]{
    --blueprint:#442315;
    --blueprint-light:#66351F;
    --navy:#25120C;
    --gold:#FB923C;
    --gold-light:#FDBA74;
    --cream:#25120C;
    --surface-1:#25120C;
    --surface-2:#351A10;
    --surface-3:#442315;
    --surface-4:#66351F;
    --border:#8A5438;
    --success:#4ADE80;
    --info:#FB923C;
}

:root[data-theme="dark"]{
    --blueprint:#171717;
    --blueprint-light:#262626;
    --navy:#050505;
    --gold:#94A3B8;
    --gold-light:#CBD5E1;
    --cream:#050505;
    --surface-1:#050505;
    --surface-2:#0F0F0F;
    --surface-3:#171717;
    --surface-4:#262626;
    --border:#404040;
}

:root[data-theme="horizon"]{
    --navy:#1B3A5C;
    --gold:#4E8FFF;
    --gold-light:#7FB0FF;
    --cream:#1B3A5C;
    --surface-1:#1B3A5C;
    --surface-2:#234870;
    --surface-3:#2C5484;
    --surface-4:#3A6BA0;
    --border:#4E7FAE;
}

:root[data-theme="light"]{
    --blueprint:#1E3A8A;
    --blueprint-light:#2563EB;
    --navy:#F8FAFC;
    --gold:#2563EB;
    --gold-light:#3B82F6;
    --cream:#F8FAFC;
    --white:#0F172A;
    --surface-1:#F8FAFC;
    --surface-2:#FFFFFF;
    --surface-3:#EFF6FF;
    --surface-4:#DBEAFE;
    --border:#94A3B8;
    --text-primary:#0F172A;
    --text-secondary:#334155;
    --text-muted:#64748B;
}

:root[data-theme="classic"]{
    --blueprint:#3D2B1F;
    --blueprint-light:#5A402E;
    --navy:#21170F;
    --gold:#B7791F;
    --gold-light:#D69E2E;
    --cream:#21170F;
    --surface-1:#21170F;
    --surface-2:#2D2016;
    --surface-3:#3D2B1F;
    --surface-4:#5A402E;
    --border:#806044;
}

:root[data-theme="ocean"]{
    --navy:#061B2B;
    --gold:#38BDF8;
    --gold-light:#7DD3FC;
    --cream:#061B2B;
    --surface-1:#061B2B;
    --surface-2:#08263A;
    --surface-3:#0B334D;
    --surface-4:#104866;
    --border:#256A8A;
}

:root[data-theme="cyan"]{
    --navy:#042126;
    --gold:#22D3EE;
    --gold-light:#67E8F9;
    --cream:#042126;
    --surface-1:#042126;
    --surface-2:#073038;
    --surface-3:#0B3F48;
    --surface-4:#105763;
    --border:#237785;
}

:root[data-theme="teal"]{
    --navy:#04201D;
    --gold:#2DD4BF;
    --gold-light:#5EEAD4;
    --cream:#04201D;
    --surface-1:#04201D;
    --surface-2:#082D29;
    --surface-3:#0D3D37;
    --surface-4:#14564D;
    --border:#28766A;
}

:root[data-theme="emerald"]{
    --navy:#041E15;
    --gold:#10B981;
    --gold-light:#34D399;
    --cream:#041E15;
    --surface-1:#041E15;
    --surface-2:#082B20;
    --surface-3:#0D3A2A;
    --surface-4:#14543C;
    --border:#277252;
}

:root[data-theme="lime"]{
    --navy:#182006;
    --gold:#84CC16;
    --gold-light:#A3E635;
    --cream:#182006;
    --surface-1:#182006;
    --surface-2:#222D09;
    --surface-3:#2D3B0D;
    --surface-4:#405416;
    --border:#60772A;
}

:root[data-theme="amber"]{
    --navy:#241704;
    --gold:#F59E0B;
    --gold-light:#FBBF24;
    --cream:#241704;
    --surface-1:#241704;
    --surface-2:#332007;
    --surface-3:#442B0A;
    --surface-4:#603E10;
    --border:#865C24;
}

:root[data-theme="orange"]{
    --navy:#271105;
    --gold:#F97316;
    --gold-light:#FB923C;
    --cream:#271105;
    --surface-1:#271105;
    --surface-2:#371808;
    --surface-3:#49210D;
    --surface-4:#652F16;
    --border:#8B492B;
}

:root[data-theme="red"]{
    --navy:#260809;
    --gold:#EF4444;
    --gold-light:#F87171;
    --cream:#260809;
    --surface-1:#260809;
    --surface-2:#360D0F;
    --surface-3:#481316;
    --surface-4:#641D20;
    --border:#8B3639;
}

:root[data-theme="rose"]{
    --navy:#280A13;
    --gold:#FB7185;
    --gold-light:#FDA4AF;
    --cream:#280A13;
    --surface-1:#280A13;
    --surface-2:#38101B;
    --surface-3:#4B1726;
    --surface-4:#682236;
    --border:#8E3A50;
}

:root[data-theme="pink"]{
    --navy:#28091E;
    --gold:#F472B6;
    --gold-light:#F9A8D4;
    --cream:#28091E;
    --surface-1:#28091E;
    --surface-2:#38102A;
    --surface-3:#4B1739;
    --surface-4:#68224F;
    --border:#8D3A68;
}

:root[data-theme="magenta"]{
    --navy:#250927;
    --gold:#E879F9;
    --gold-light:#F0ABFC;
    --cream:#250927;
    --surface-1:#250927;
    --surface-2:#341037;
    --surface-3:#461849;
    --surface-4:#612366;
    --border:#853C89;
}

:root[data-theme="violet"]{
    --navy:#160B2D;
    --gold:#8B5CF6;
    --gold-light:#A78BFA;
    --cream:#160B2D;
    --surface-1:#160B2D;
    --surface-2:#20113E;
    --surface-3:#2B1852;
    --surface-4:#3D2371;
    --border:#5D3D96;
}

:root[data-theme="indigo"]{
    --navy:#0E1230;
    --gold:#6366F1;
    --gold-light:#818CF8;
    --cream:#0E1230;
    --surface-1:#0E1230;
    --surface-2:#151A42;
    --surface-3:#1D2457;
    --surface-4:#2B3577;
    --border:#47539A;
}

:root[data-theme="cobalt"]{
    --navy:#071733;
    --gold:#3B82F6;
    --gold-light:#60A5FA;
    --cream:#071733;
    --surface-1:#071733;
    --surface-2:#0B2046;
    --surface-3:#102C5C;
    --surface-4:#193F7D;
    --border:#315E9E;
}

:root[data-theme="slate"]{
    --navy:#0F172A;
    --gold:#64748B;
    --gold-light:#94A3B8;
    --cream:#0F172A;
    --surface-1:#0F172A;
    --surface-2:#172033;
    --surface-3:#1E293B;
    --surface-4:#334155;
    --border:#475569;
}

:root[data-theme="graphite"]{
    --navy:#111111;
    --gold:#A3A3A3;
    --gold-light:#D4D4D4;
    --cream:#111111;
    --surface-1:#111111;
    --surface-2:#1A1A1A;
    --surface-3:#262626;
    --surface-4:#363636;
    --border:#525252;
}

:root[data-theme="coffee"]{
    --navy:#21150F;
    --gold:#C08457;
    --gold-light:#D6A77A;
    --cream:#21150F;
    --surface-1:#21150F;
    --surface-2:#2E1E16;
    --surface-3:#3D291F;
    --surface-4:#573C2E;
    --border:#785A47;
}

:root[data-theme="lavender"]{
    --navy:#1B1530;
    --gold:#C4B5FD;
    --gold-light:#DDD6FE;
    --cream:#1B1530;
    --surface-1:#1B1530;
    --surface-2:#261E42;
    --surface-3:#332857;
    --surface-4:#493A76;
    --border:#6B5A96;
}

:root[data-theme="mint"]{
    --navy:#0A211B;
    --gold:#6EE7B7;
    --gold-light:#A7F3D0;
    --cream:#0A211B;
    --surface-1:#0A211B;
    --surface-2:#102F27;
    --surface-3:#173E34;
    --surface-4:#22584A;
    --border:#3B7868;
}

:root[data-theme]:not([data-theme="navy"]):not([data-theme="light"]){
    --blueprint:var(--surface-3);
    --blueprint-light:var(--surface-4);
}