/* ============================================================
   tokens.css — tasarım sistemi (v2)
   KURAL: Hiçbir bileşen CSS'i sabit renk yazmaz.
   Katmanlar: yüzey (surface) · kenar (border) · metin · vurgu · efekt
   ============================================================ */

:root {
    /* ---------------------------------------------- Tipografi */
    --font-ui: "Plus Jakarta Sans", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    --font-display: "Plus Jakarta Sans", system-ui, sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;

    --fs-3xs: 10px;
    --fs-2xs: 11px;
    --fs-xs:  12px;
    --fs-sm:  13px;
    --fs-md:  14px;
    --fs-lg:  16px;
    --fs-xl:  19px;
    --fs-2xl: 23px;
    --fs-3xl: 30px;
    --fs-4xl: 40px;
    --fs-5xl: 56px;

    --lh-tight: 1.2;
    --lh-snug: 1.4;
    --lh-base: 1.62;

    --tracking-tight: -.022em;
    --tracking-wide: .08em;

    /* ---------------------------------------------- Ölçek */
    --sp-1: 4px;   --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
    --sp-5: 20px;  --sp-6: 24px;  --sp-7: 28px;  --sp-8: 32px;
    --sp-10: 40px; --sp-12: 48px; --sp-16: 64px;

    --r-xs: 6px;  --r-sm: 9px;  --r-md: 13px;
    --r-lg: 18px; --r-xl: 24px; --r-2xl: 32px;
    --r-pill: 999px;

    --container: 1340px;
    --side-width: 324px;

    /* ---------------------------------------------- Hareket */
    --ease: cubic-bezier(.22, .61, .36, 1);
    --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
    --dur-fast: 130ms;
    --dur: 220ms;
    --dur-slow: 420ms;
}

/* ============================================================
   NEON — varsayılan (derin mor/mavi, yüksek kontrast)
   ============================================================ */
:root,
:root[data-theme="neon"] {
    /* Zemin katmanları — aşağıdan yukarı doğru açılır */
    --bg:            #07080e;
    --bg-2:          #0a0c15;
    --surface:       #10121d;
    --surface-2:     #161927;
    --surface-3:     #1d2132;
    --surface-4:     #252a3e;
    --surface-hover: #1a1e2d;
    --surface-glass: rgba(16, 18, 29, .78);

    /* Kenarlar */
    --border:        #242840;
    --border-soft:   #191d2e;
    --border-strong: #363c5c;
    --border-glow:   rgba(124, 92, 255, .35);

    /* Metin */
    --text:        #eceefa;
    --text-muted:  #9aa2c0;
    --text-dim:    #676e8c;
    --text-faint:  #464c66;
    --text-inverse:#080a10;

    /* Vurgu */
    --primary:      #7c5cff;
    --primary-2:    #4aa8ff;
    --primary-3:    #b06cff;
    --primary-soft: rgba(124, 92, 255, .15);
    --primary-dim:  rgba(124, 92, 255, .07);
    --primary-ink:  #ffffff;

    --accent:  #ff4d8d;
    --success: #23d18b;
    --warn:    #ffb545;
    --danger:  #ff5a6e;
    --info:    #4aa8ff;
    --discord: #5865f2;

    /* Gradyanlar */
    --grad-primary: linear-gradient(120deg, #7c5cff 0%, #4aa8ff 100%);
    --grad-accent:  linear-gradient(120deg, #ff4d8d 0%, #ffb545 100%);
    --grad-success: linear-gradient(120deg, #23d18b 0%, #4aa8ff 100%);
    --grad-surface: linear-gradient(160deg, rgba(124,92,255,.10) 0%, transparent 55%);
    --grad-sheen:   linear-gradient(100deg, transparent 20%, rgba(255,255,255,.055) 50%, transparent 80%);

    /* Efektler */
    --ring:      rgba(124, 92, 255, .45);
    --shadow-xs: 0 1px 2px rgba(0,0,0,.4);
    --shadow-sm: 0 2px 6px -2px rgba(0,0,0,.5);
    --shadow-md: 0 10px 28px -14px rgba(0,0,0,.75);
    --shadow-lg: 0 26px 64px -26px rgba(0,0,0,.88);
    --shadow-glow: 0 10px 40px -16px rgba(124,92,255,.55);
    --inset-top: inset 0 1px 0 rgba(255,255,255,.055);

    --glow-hero: radial-gradient(70% 130% at 18% -10%, rgba(124,92,255,.30), transparent 62%),
                 radial-gradient(60% 120% at 88% 0%, rgba(74,168,255,.18), transparent 60%);
    --glow-head: radial-gradient(60% 200% at 50% -40%, rgba(124,92,255,.22), transparent 70%);
    --header-bg: linear-gradient(180deg, #141830 0%, #0b0d17 100%);

    --dot-grid: rgba(255,255,255,.055);
    color-scheme: dark;
}

/* ============================================================
   FIVEX — kurumsal mavi / turkuaz
   ============================================================ */
:root[data-theme="fivex"] {
    --bg:            #05090f;
    --bg-2:          #070d17;
    --surface:       #0c1420;
    --surface-2:     #111c2d;
    --surface-3:     #16253a;
    --surface-4:     #1d3049;
    --surface-hover: #142134;
    --surface-glass: rgba(12, 20, 32, .78);

    --border:        #1c2c44;
    --border-soft:   #14202f;
    --border-strong: #2a4265;
    --border-glow:   rgba(47, 123, 255, .35);

    --text:        #e6f0fb;
    --text-muted:  #93a8c4;
    --text-dim:    #647b98;
    --text-faint:  #43566e;
    --text-inverse:#05090f;

    --primary:      #2f7bff;
    --primary-2:    #17d0ff;
    --primary-3:    #00e0b8;
    --primary-soft: rgba(47, 123, 255, .17);
    --primary-dim:  rgba(47, 123, 255, .08);
    --primary-ink:  #ffffff;

    --accent:  #00e0b8;
    --success: #25c98a;
    --warn:    #ffb03a;
    --danger:  #ff5f6d;
    --info:    #17d0ff;
    --discord: #5865f2;

    --grad-primary: linear-gradient(120deg, #2f7bff 0%, #17d0ff 100%);
    --grad-accent:  linear-gradient(120deg, #00e0b8 0%, #17d0ff 100%);
    --grad-success: linear-gradient(120deg, #25c98a 0%, #17d0ff 100%);
    --grad-surface: linear-gradient(160deg, rgba(47,123,255,.12) 0%, transparent 55%);
    --grad-sheen:   linear-gradient(100deg, transparent 20%, rgba(255,255,255,.06) 50%, transparent 80%);

    --ring: rgba(47, 123, 255, .45);
    --shadow-glow: 0 10px 40px -16px rgba(47,123,255,.6);
    --glow-hero: radial-gradient(70% 130% at 18% -10%, rgba(47,123,255,.30), transparent 62%),
                 radial-gradient(60% 120% at 88% 0%, rgba(0,224,184,.16), transparent 60%);
    --glow-head: radial-gradient(60% 200% at 50% -40%, rgba(47,123,255,.24), transparent 70%);
    --header-bg: linear-gradient(180deg, #0f2440 0%, #081220 100%);
    color-scheme: dark;
}

/* ============================================================
   CARBON — nötr, düşük doygunluk, endüstriyel
   ============================================================ */
:root[data-theme="carbon"] {
    --bg:            #0c0d0f;
    --bg-2:          #101214;
    --surface:       #16181c;
    --surface-2:     #1c1f24;
    --surface-3:     #23272d;
    --surface-4:     #2c3138;
    --surface-hover: #1f2329;
    --surface-glass: rgba(22, 24, 28, .8);

    --border:        #292d34;
    --border-soft:   #1e2126;
    --border-strong: #3a4049;
    --border-glow:   rgba(140, 160, 200, .28);

    --text:        #eaecef;
    --text-muted:  #9ba3af;
    --text-dim:    #6c7481;
    --text-faint:  #4c525c;

    --primary:      #6f8cff;
    --primary-2:    #93a7ff;
    --primary-3:    #d8a250;
    --primary-soft: rgba(111, 140, 255, .15);
    --primary-dim:  rgba(111, 140, 255, .07);
    --primary-ink:  #0c0d0f;

    --accent:  #d8a250;
    --success: #4cb782;
    --warn:    #e2a33c;
    --danger:  #e0575f;
    --info:    #6f8cff;

    --grad-primary: linear-gradient(120deg, #6f8cff 0%, #93a7ff 100%);
    --grad-accent:  linear-gradient(120deg, #d8a250 0%, #e2c07c 100%);
    --grad-success: linear-gradient(120deg, #4cb782 0%, #6f8cff 100%);
    --grad-surface: linear-gradient(160deg, rgba(255,255,255,.05) 0%, transparent 55%);

    --ring: rgba(111, 140, 255, .4);
    --shadow-glow: 0 10px 40px -18px rgba(0,0,0,.9);
    --glow-hero: radial-gradient(70% 130% at 18% -10%, rgba(255,255,255,.07), transparent 62%);
    --glow-head: radial-gradient(60% 200% at 50% -40%, rgba(255,255,255,.05), transparent 70%);
    --header-bg: linear-gradient(180deg, #1c1f24 0%, #121417 100%);
    color-scheme: dark;
}

/* ============================================================
   AMOLED — tam siyah, OLED
   ============================================================ */
:root[data-theme="amoled"] {
    --bg:            #000000;
    --bg-2:          #040405;
    --surface:       #0a0a0d;
    --surface-2:     #101014;
    --surface-3:     #17171d;
    --surface-4:     #1f1f27;
    --surface-hover: #141419;
    --surface-glass: rgba(10, 10, 13, .82);

    --border:        #1d1d25;
    --border-soft:   #131318;
    --border-strong: #2e2e3a;
    --border-glow:   rgba(138, 108, 255, .4);

    --text:        #f0f1f7;
    --text-muted:  #949ab0;
    --text-dim:    #666c80;
    --text-faint:  #464b5c;

    --primary:      #8a6cff;
    --primary-2:    #4aa8ff;
    --primary-3:    #c07cff;
    --primary-soft: rgba(138, 108, 255, .18);
    --primary-dim:  rgba(138, 108, 255, .08);
    --primary-ink:  #ffffff;

    --accent:  #ff4d8d;
    --success: #23d18b;
    --warn:    #ffb545;
    --danger:  #ff5a6e;
    --info:    #4aa8ff;

    --grad-primary: linear-gradient(120deg, #8a6cff 0%, #4aa8ff 100%);
    --grad-accent:  linear-gradient(120deg, #ff4d8d 0%, #ffb545 100%);
    --grad-success: linear-gradient(120deg, #23d18b 0%, #4aa8ff 100%);
    --grad-surface: linear-gradient(160deg, rgba(138,108,255,.12) 0%, transparent 55%);

    --ring: rgba(138, 108, 255, .45);
    --shadow-md: 0 10px 28px -14px rgba(0,0,0,1);
    --shadow-lg: 0 26px 64px -26px rgba(0,0,0,1);
    --shadow-glow: 0 10px 44px -16px rgba(138,108,255,.6);
    --glow-hero: radial-gradient(70% 130% at 18% -10%, rgba(138,108,255,.26), transparent 62%);
    --glow-head: radial-gradient(60% 200% at 50% -40%, rgba(138,108,255,.20), transparent 70%);
    --header-bg: linear-gradient(180deg, #0d0d12 0%, #000 100%);
    color-scheme: dark;
}

/* ============================================================
   LIGHT — gerçek açık tema
   ============================================================ */
:root[data-theme="light"] {
    --bg:            #eef1f7;
    --bg-2:          #f4f6fb;
    --surface:       #ffffff;
    --surface-2:     #f6f8fc;
    --surface-3:     #eef2f9;
    --surface-4:     #e4eaf4;
    --surface-hover: #f2f5fb;
    --surface-glass: rgba(255, 255, 255, .82);

    --border:        #e0e6f0;
    --border-soft:   #eef2f8;
    --border-strong: #c6d0e0;
    --border-glow:   rgba(100, 64, 255, .28);

    --text:        #171b28;
    --text-muted:  #5a657f;
    --text-dim:    #8a93a8;
    --text-faint:  #aeb6c6;
    --text-inverse:#ffffff;

    --primary:      #6440ff;
    --primary-2:    #2f86ff;
    --primary-3:    #9b5de5;
    --primary-soft: rgba(100, 64, 255, .10);
    --primary-dim:  rgba(100, 64, 255, .05);
    --primary-ink:  #ffffff;

    --accent:  #e0356f;
    --success: #0f9d63;
    --warn:    #c47b06;
    --danger:  #dc3545;
    --info:    #2f86ff;
    --discord: #5865f2;

    --grad-primary: linear-gradient(120deg, #6440ff 0%, #2f86ff 100%);
    --grad-accent:  linear-gradient(120deg, #e0356f 0%, #f0a03a 100%);
    --grad-success: linear-gradient(120deg, #0f9d63 0%, #2f86ff 100%);
    --grad-surface: linear-gradient(160deg, rgba(100,64,255,.07) 0%, transparent 55%);
    --grad-sheen:   linear-gradient(100deg, transparent 20%, rgba(0,0,0,.03) 50%, transparent 80%);

    --ring: rgba(100, 64, 255, .32);
    --shadow-xs: 0 1px 2px rgba(23,33,56,.06);
    --shadow-sm: 0 2px 8px -2px rgba(23,33,56,.10);
    --shadow-md: 0 12px 30px -16px rgba(23,33,56,.24);
    --shadow-lg: 0 28px 64px -28px rgba(23,33,56,.3);
    --shadow-glow: 0 12px 40px -18px rgba(100,64,255,.4);
    --inset-top: inset 0 1px 0 rgba(255,255,255,.9);

    --glow-hero: radial-gradient(70% 130% at 18% -10%, rgba(100,64,255,.16), transparent 62%),
                 radial-gradient(60% 120% at 88% 0%, rgba(47,134,255,.12), transparent 60%);
    --glow-head: radial-gradient(60% 200% at 50% -40%, rgba(100,64,255,.10), transparent 70%);
    --header-bg: linear-gradient(180deg, #ffffff 0%, #f3f6fc 100%);

    --dot-grid: rgba(23,33,56,.06);
    color-scheme: light;
}

/* ============================================================
   Ön ek (prefix) paleti — temadan bağımsız
   ============================================================ */
:root {
    --prefix-default: #8b95ab;
    --prefix-red:     #ff5a6e;
    --prefix-orange:  #ff8a3d;
    --prefix-yellow:  #f0b429;
    --prefix-green:   #23d18b;
    --prefix-teal:    #00c2c7;
    --prefix-blue:    #4aa8ff;
    --prefix-purple:  #9b5de5;
    --prefix-pink:    #ff4d8d;
}