/* =========================================================
   DESIGN TOKENS
   ========================================================= */
:root {
    /* Palette aligned with the brand banner */
    --bg-0: #07070c;
    --bg-1: #0d0d15;
    --bg-2: #14141d;
    --surface: rgba(255, 255, 255, 0.03);
    --surface-hover: rgba(255, 255, 255, 0.06);
    --border: rgba(255, 255, 255, 0.08);
    --border-strong: rgba(255, 255, 255, 0.14);

    --text-0: #ffffff;
    --text-1: #e6e6ee;
    --text-2: #9999a8;
    --text-3: #5c5c6b;

    /* Kotlin / banner brand colors */
    --k-orange: #E44857;
    --k-pink:   #C711E1;
    --k-purple: #7F52FF;
    --cyan:     #00D4FF;

    --accent:    var(--k-purple);
    --accent-2:  var(--cyan);
    --accent-3:  var(--k-orange);
    --accent-4:  var(--k-pink);
    --accent-glow: rgba(127, 82, 255, 0.42);

    --success: #4ade80;
    --warning: #ffb800;

    --gradient: linear-gradient(135deg, var(--k-orange) 0%, var(--k-pink) 50%, var(--k-purple) 100%);
    --gradient-warm: linear-gradient(135deg, var(--k-orange) 0%, var(--k-pink) 100%);

    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 22px;
    --radius-xl: 32px;

    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

    --nav-h: 72px;
}

/* =========================================================
   RESET + BASE
   ========================================================= */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    scroll-padding-top: var(--nav-h);
}

body {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    /* Mirrors the radial-gradient atmosphere of the brand banner */
    background:
        radial-gradient(at 18% 22%, hsla(355, 73%, 58%, 0.22) 0px, transparent 50%),
        radial-gradient(at 78% 28%, hsla(290, 87%, 50%, 0.20) 0px, transparent 50%),
        radial-gradient(at 65% 82%, hsla(258, 100%, 66%, 0.22) 0px, transparent 55%),
        radial-gradient(at 22% 88%, hsla(190, 100%, 50%, 0.12) 0px, transparent 50%),
        var(--bg-0);
    background-attachment: fixed;
    color: var(--text-1);
    line-height: 1.6;
    overflow-x: hidden;
    font-weight: 400;
    min-height: 100vh;
}

::selection {
    background: var(--accent);
    color: white;
}

::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--bg-0); }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }

/* =========================================================
   LIGHT THEME OVERRIDES
   ========================================================= */
[data-theme="light"] {
    --bg-0: #f5f5f7;
    --bg-1: #ffffff;
    --bg-2: #eaeaec;
    --surface: rgba(0, 0, 0, 0.04);
    --surface-hover: rgba(0, 0, 0, 0.08);
    --border: rgba(0, 0, 0, 0.1);
    --border-strong: rgba(0, 0, 0, 0.18);

    --text-0: #111111;
    --text-1: #333333;
    --text-2: #666677;
    --text-3: #9999aa;
    
    --nav-bg: rgba(255, 255, 255, 0.7);
}