:root {

    --bg:
        radial-gradient(circle at top right,
            rgba(255, 145, 77, .08),
            transparent 35%),
        radial-gradient(circle at bottom left,
            rgba(255, 255, 255, .025),
            transparent 45%),
        linear-gradient(180deg,
            #0c0d12 0%,
            #11131a 100%);
    --surface: #ffffff;
    --surface-2: #fff3ea;

    --text: #1f2937;
    --text-secondary: #6b7280;

    --primary: #ffaf77;
    --primary-light: #e9894a;
    --primary-hover: #f49a62;

    --success: #22c55e;
    --danger: #ef4444;

    --border: rgba(15, 23, 42, .08);

    --shadow:
        0 10px 35px rgba(15, 23, 42, .08),
        0 3px 10px rgba(15, 23, 42, .05);

    --radius-xl: 28px;
    --radius-lg: 20px;
    --radius-md: 16px;
    --radius-sm: 12px;

    --transition: .25s ease;

    --space-xs: 6px;
    --space-sm: 10px;
    --space-md: 16px;
    --space-lg: 24px;

}

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

body.theme-dark {

    --bg:
        radial-gradient(circle at top right,
            rgba(255, 145, 77, .10),
            transparent 35%),
        radial-gradient(circle at bottom left,
            rgba(255, 255, 255, .03),
            transparent 45%),
        linear-gradient(180deg,
            #090b10 0%,
            #11131a 100%);

    --surface: #171b26;
    --surface-2: #202534;

    --text: #f3f4f6;
    --text-secondary: #aeb5c6;

    --border: rgba(255, 255, 255, .05);

    --shadow:
        0 15px 40px rgba(0, 0, 0, .45);

}