/* ====================================
   DEĞİŞKENLER
   Tüm renkler, spacing, font tanımları
   ==================================== */

:root {
    /* ---------- RENKLER ---------- */
    --ink: #0f172a;
    --ink-light: #334155;
    --muted: #475569;
    --muted-light: #64748b;

    --line: rgba(15, 23, 42, 0.10);
    --lineStrong: rgba(15, 23, 42, 0.16);

    --glass: rgba(255, 255, 255, 0.88);
    --glass-solid: rgba(255, 255, 255, 0.97);

    /* Ana renkler */
    --primary: #0f172a;
    --primary-light: #1e293b;
    --primary-dark: #020617;

    --sky: #38bdf8;
    --sky-light: #7dd3fc;
    --sky-dark: #0284c7;
    --sky-bg: #f0f9ff;
    --sky-border: #bae6fd;

    --emerald: #10b981;
    --emerald-light: #6ee7b7;
    --emerald-dark: #047857;
    --emerald-bg: #ecfdf5;
    --emerald-border: #a7f3d0;

    --amber: #f59e0b;
    --amber-light: #fcd34d;
    --amber-dark: #b45309;
    --amber-bg: #fffbeb;
    --amber-border: #fde68a;

    --purple: #8b5cf6;
    --red: #ef4444;

    /* ---------- SPACING (8'lik sistem) ---------- */
    --spacing-1: 4px;
    --spacing-2: 8px;
    --spacing-3: 12px;
    --spacing-4: 16px;
    --spacing-5: 20px;
    --spacing-6: 24px;
    --spacing-8: 32px;
    --spacing-10: 40px;
    --spacing-12: 48px;
    --spacing-16: 64px;
    --spacing-20: 80px;
    --spacing-24: 96px;

    /* ---------- BORDER RADIUS ---------- */
    --radius-sm: 12px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --radius-xl: 32px;
    --radius-full: 999px;

    /* ---------- CONTAINER ---------- */
    --container-sm: 640px;
    --container-md: 768px;
    --container-lg: 1024px;
    --container-xl: 1280px;
    --container-2xl: 1536px;

    /* ---------- FONT SIZES ---------- */
    --text-xs: 12px;
    --text-sm: 14px;
    --text-base: 16px;
    --text-lg: 18px;
    --text-xl: 20px;
    --text-2xl: 24px;
    --text-3xl: 30px;
    --text-4xl: 36px;
    --text-5xl: 48px;
    --text-6xl: 64px;

    /* ---------- FONT WEIGHTS ---------- */
    --font-normal: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;
    --font-extrabold: 800;

    /* ---------- SHADOWS ---------- */
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1);
    --shadow-card: 0 6px 18px rgba(0, 0, 0, 0.03);
    --shadow-card-hover: 0 18px 36px -18px rgba(56, 189, 248, 0.22);

    /* ---------- TRANSITIONS ---------- */
    --transition-fast: 0.15s ease;
    --transition-base: 0.2s ease;
    --transition-slow: 0.3s ease;

    /* ---------- Z-INDEX ---------- */
    --z-dropdown: 50;
    --z-sticky: 100;
    --z-modal: 200;
    --z-popover: 300;
}