/* =========================================================
   NANES — DESIGN TOKENS
   01 — ROOT VARIABLES
   ========================================================= */

:root {

    --bg-main: #080b12;
    --bg-secondary: #0d111b;
    --bg-tertiary: #121826;

    --surface: rgba(18, 24, 38, 0.72);
    --surface-solid: #121826;
    --surface-light: rgba(255, 255, 255, 0.045);

    --border: rgba(255, 255, 255, 0.08);
    --border-strong: rgba(255, 255, 255, 0.13);

    --text: #f8fafc;
    --text-secondary: #b7c0d1;
    --text-muted: #7d8799;

    --primary: #b99a62;
    --primary-light: #d7bd88;
    --primary-dark: #8f713d;

    --accent: #7c5cff;
    --accent-light: #9d86ff;

    --success: #22c55e;
    --warning: #f59e0b;
    --danger: #ef4444;
    --info: #38bdf8;

    --gradient-primary:
        linear-gradient(
            135deg,
            #d7bd88 0%,
            #a98345 45%,
            #76592d 100%
        );

    --gradient-accent:
        linear-gradient(
            135deg,
            #7c5cff,
            #a78bfa
        );

    --gradient-dark:
        linear-gradient(
            135deg,
            #161d2c,
            #0d111b
        );

    --shadow-sm:
        0 4px 15px rgba(0, 0, 0, 0.15);

    --shadow-md:
        0 12px 35px rgba(0, 0, 0, 0.25);

    --shadow-lg:
        0 25px 70px rgba(0, 0, 0, 0.38);

    --glow-primary:
        0 0 35px rgba(185, 154, 98, 0.16);

    --glow-accent:
        0 0 35px rgba(124, 92, 255, 0.18);

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

    --sidebar-width: 270px;

    --transition-fast: 180ms ease;
    --transition-normal: 280ms ease;
    --transition-slow: 500ms ease;
}


/* =========================================================
   LIGHT MODE
   ========================================================= */

[data-theme="light"] {

    --bg-main: #f5f6f8;
    --bg-secondary: #edf0f4;
    --bg-tertiary: #ffffff;

    --surface: rgba(255, 255, 255, 0.82);
    --surface-solid: #ffffff;
    --surface-light: rgba(15, 23, 42, 0.035);

    --border: rgba(15, 23, 42, 0.08);
    --border-strong: rgba(15, 23, 42, 0.13);

    --text: #111827;
    --text-secondary: #4b5563;
    --text-muted: #7b8494;

    --primary: #96763e;
    --primary-light: #b08c50;
    --primary-dark: #765b2f;

    --accent: #6548d9;
    --accent-light: #8067ed;

    --shadow-sm:
        0 4px 15px rgba(15, 23, 42, 0.07);

    --shadow-md:
        0 12px 35px rgba(15, 23, 42, 0.09);

    --shadow-lg:
        0 25px 70px rgba(15, 23, 42, 0.12);

    --glow-primary:
        0 0 35px rgba(150, 118, 62, 0.12);

    --glow-accent:
        0 0 35px rgba(101, 72, 217, 0.12);
}