/* =====================================================================
   Curevia.net - Tasarim Tokenlari (Design Tokens)
   ---------------------------------------------------------------------
   Tek kaynak: renk, tipografi, bosluk, yaricap, golge, katman (z-index).
   Tema stratejisi:
     - Varsayilan: isletim sistemi tercihi (prefers-color-scheme)
     - Kullanici secimi: <html data-theme="light|dark"> (JS ile yazilir)
   Hicbir bilesen ham renk degerini dogrudan kullanmaz; yalnizca bu
   tokenlari referans alir. Boylece tema eklemek tek dosyadan yapilir.
   ===================================================================== */

:root {
    color-scheme: light;

    /* --- Marka paleti (referans degerler) --------------------------- */
    --brand-900: #04231f;
    --brand-800: #064e47;
    --brand-700: #0f766e;
    --brand-600: #0d9488;
    --brand-500: #14b8a6;
    --brand-300: #5eead4;
    --navy-900: #0b1220;
    --navy-800: #131d31;

    /* --- Yuzey ve metin (semantik, ACIK tema) ----------------------- */
    --color-bg: #f5f7fa;
    --color-bg-pattern: radial-gradient(circle at 12% 8%, #e7f5f3 0%, transparent 42%),
                        radial-gradient(circle at 88% 2%, #e8effb 0%, transparent 38%);
    --color-surface: #ffffff;
    --color-surface-2: #f8fafc;
    --color-surface-3: #eef2f7;
    --color-border: #dde5ee;
    --color-border-strong: #c6d2e0;
    --color-text: #0f172a;
    --color-text-muted: #566577;
    --color-text-faint: #8393a7;
    --color-text-inverse: #ffffff;

    /* --- Ana renk ve durum renkleri -------------------------------- */
    --color-primary: #0f766e;
    --color-primary-hover: #115e59;
    --color-primary-fg: #ffffff;
    --color-primary-soft: #e6f4f2;
    --color-primary-soft-fg: #075e57;

    --color-accent: #0284c7;
    --color-accent-soft: #e8f4fd;

    --color-success: #047857;
    --color-success-soft: #ecfdf5;
    --color-success-border: #a7f3d0;

    --color-warning: #b45309;
    --color-warning-soft: #fffbeb;
    --color-warning-border: #fde68a;

    --color-danger: #b91c1c;
    --color-danger-soft: #fef2f2;
    --color-danger-border: #fecaca;

    --color-info: #1d4ed8;
    --color-info-soft: #eff6ff;
    --color-info-border: #bfdbfe;

    /* --- Rozet renkleri (satici) ----------------------------------- */
    --badge-newbie-bg: #eef2f7;
    --badge-newbie-fg: #475569;
    --badge-verified-bg: #e8f0fe;
    --badge-verified-fg: #1d4ed8;
    --badge-trusted-bg: #e7f7f1;
    --badge-trusted-fg: #047857;
    --badge-top-bg: #fef4e6;
    --badge-top-fg: #b45309;

    /* --- Odak halkasi (erisilebilirlik) ---------------------------- */
    --focus-ring: 0 0 0 3px rgba(15, 118, 110, 0.35);
    --focus-ring-danger: 0 0 0 3px rgba(185, 28, 28, 0.3);

    /* --- Tipografi -------------------------------------------------- */
    --font-sans: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto,
                 "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
                 "Liberation Mono", monospace;

    --text-xs: 0.75rem;    /* 12px */
    --text-sm: 0.8125rem;  /* 13px */
    --text-base: 0.9375rem;/* 15px */
    --text-md: 1rem;       /* 16px */
    --text-lg: 1.125rem;   /* 18px */
    --text-xl: 1.375rem;   /* 22px */
    --text-2xl: 1.75rem;   /* 28px */
    --text-3xl: 2.25rem;   /* 36px */
    --text-4xl: 3rem;      /* 48px */

    --leading-tight: 1.2;
    --leading-snug: 1.35;
    --leading-normal: 1.6;
    --leading-relaxed: 1.75;

    --weight-normal: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;

    --tracking-tight: -0.02em;
    --tracking-wide: 0.02em;

    /* --- Bosluk olcegi (4px tabanli) ------------------------------- */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;

    /* --- Yaricap ---------------------------------------------------- */
    --radius-xs: 4px;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-full: 999px;

    /* --- Golge ------------------------------------------------------ */
    --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.05);
    --shadow-sm: 0 2px 6px rgba(15, 23, 42, 0.06);
    --shadow-md: 0 8px 20px -6px rgba(15, 23, 42, 0.12);
    --shadow-lg: 0 20px 40px -16px rgba(15, 23, 42, 0.2);
    --shadow-xl: 0 32px 64px -24px rgba(15, 23, 42, 0.28);

    /* --- Yerlesim --------------------------------------------------- */
    --container-sm: 640px;
    --container-md: 900px;
    --container-lg: 1200px;
    --container-xl: 1360px;
    --header-height: 4.25rem;
    --sidebar-width: 16rem;

    /* --- Katmanlar -------------------------------------------------- */
    --z-base: 1;
    --z-sticky: 50;
    --z-header: 100;
    --z-dropdown: 200;
    --z-backdrop: 400;
    --z-modal: 500;
    --z-toast: 600;

    /* --- Hareket ---------------------------------------------------- */
    --transition-fast: 120ms ease;
    --transition: 180ms cubic-bezier(0.32, 0.72, 0, 1);
    --transition-slow: 320ms cubic-bezier(0.32, 0.72, 0, 1);

    /* --- Bilesen ozel tokenlari ------------------------------------ */
    --button-height: 2.75rem;
    --button-height-sm: 2.125rem;
    --button-height-lg: 3.25rem;
    --input-height: 2.875rem;
    --skeleton-base: #e8edf4;
    --skeleton-shine: #f4f7fb;
}

/* =====================================================================
   KARANLIK TEMA
   Iki durumda devreye girer:
     1) Kullanici secimi : <html data-theme="dark">
     2) Sistem tercihi   : data-theme yokken prefers-color-scheme: dark
   ===================================================================== */
:root[data-theme="dark"] {
    color-scheme: dark;

    --color-bg: #070b14;
    --color-bg-pattern: radial-gradient(circle at 12% 8%, #0d2a2a 0%, transparent 45%),
                        radial-gradient(circle at 88% 2%, #101d33 0%, transparent 40%);
    --color-surface: #0d1524;
    --color-surface-2: #111b2e;
    --color-surface-3: #16233a;
    --color-border: #1e2b40;
    --color-border-strong: #2b3c56;
    --color-text: #e6edf7;
    --color-text-muted: #9fb0c9;
    --color-text-faint: #6e8099;
    --color-text-inverse: #06111f;

    --color-primary: #2dd4bf;
    --color-primary-hover: #5eead4;
    --color-primary-fg: #04231f;
    --color-primary-soft: #102f2c;
    --color-primary-soft-fg: #7ce4d6;

    --color-accent: #38bdf8;
    --color-accent-soft: #0b2236;

    --color-success: #34d399;
    --color-success-soft: #062b23;
    --color-success-border: #14523f;

    --color-warning: #fbbf24;
    --color-warning-soft: #2a1f05;
    --color-warning-border: #55420d;

    --color-danger: #f87171;
    --color-danger-soft: #2b1113;
    --color-danger-border: #5b2325;

    --color-info: #60a5fa;
    --color-info-soft: #0c1c36;
    --color-info-border: #1e3a63;

    --badge-newbie-bg: #1b2434;
    --badge-newbie-fg: #b6c3d6;
    --badge-verified-bg: #12233f;
    --badge-verified-fg: #93c5fd;
    --badge-trusted-bg: #0d2b26;
    --badge-trusted-fg: #6ee7b7;
    --badge-top-bg: #2c2109;
    --badge-top-fg: #fcd34d;

    --focus-ring: 0 0 0 3px rgba(45, 212, 191, 0.35);
    --focus-ring-danger: 0 0 0 3px rgba(248, 113, 113, 0.3);

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.45);
    --shadow-md: 0 10px 24px -8px rgba(0, 0, 0, 0.6);
    --shadow-lg: 0 24px 48px -20px rgba(0, 0, 0, 0.7);
    --shadow-xl: 0 36px 72px -28px rgba(0, 0, 0, 0.8);

    --skeleton-base: #16223a;
    --skeleton-shine: #1e2d48;
}

/* Sistem tercihi ile karanlik tema (kullanici acikca "light" secmediyse) */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]):not([data-theme="dark"]) {
        color-scheme: dark;

        --color-bg: #070b14;
        --color-bg-pattern: radial-gradient(circle at 12% 8%, #0d2a2a 0%, transparent 45%),
                            radial-gradient(circle at 88% 2%, #101d33 0%, transparent 40%);
        --color-surface: #0d1524;
        --color-surface-2: #111b2e;
        --color-surface-3: #16233a;
        --color-border: #1e2b40;
        --color-border-strong: #2b3c56;
        --color-text: #e6edf7;
        --color-text-muted: #9fb0c9;
        --color-text-faint: #6e8099;
        --color-text-inverse: #06111f;

        --color-primary: #2dd4bf;
        --color-primary-hover: #5eead4;
        --color-primary-fg: #04231f;
        --color-primary-soft: #102f2c;
        --color-primary-soft-fg: #7ce4d6;

        --color-accent: #38bdf8;
        --color-accent-soft: #0b2236;

        --color-success: #34d399;
        --color-success-soft: #062b23;
        --color-success-border: #14523f;

        --color-warning: #fbbf24;
        --color-warning-soft: #2a1f05;
        --color-warning-border: #55420d;

        --color-danger: #f87171;
        --color-danger-soft: #2b1113;
        --color-danger-border: #5b2325;

        --color-info: #60a5fa;
        --color-info-soft: #0c1c36;
        --color-info-border: #1e3a63;

        --badge-newbie-bg: #1b2434;
        --badge-newbie-fg: #b6c3d6;
        --badge-verified-bg: #12233f;
        --badge-verified-fg: #93c5fd;
        --badge-trusted-bg: #0d2b26;
        --badge-trusted-fg: #6ee7b7;
        --badge-top-bg: #2c2109;
        --badge-top-fg: #fcd34d;

        --focus-ring: 0 0 0 3px rgba(45, 212, 191, 0.35);
        --focus-ring-danger: 0 0 0 3px rgba(248, 113, 113, 0.3);

        --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
        --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.45);
        --shadow-md: 0 10px 24px -8px rgba(0, 0, 0, 0.6);
        --shadow-lg: 0 24px 48px -20px rgba(0, 0, 0, 0.7);
        --shadow-xl: 0 36px 72px -28px rgba(0, 0, 0, 0.8);

        --skeleton-base: #16223a;
        --skeleton-shine: #1e2d48;
    }
}

/* Hareket azaltma tercihi (erisilebilirlik) */
@media (prefers-reduced-motion: reduce) {
    :root {
        --transition-fast: 0ms;
        --transition: 0ms;
        --transition-slow: 0ms;
    }
}