@charset "UTF-8";
/* =====================================================================
   V3 · STÜDYO — TOKEN KATMANI
   primitive → semantic → component. Ham renk YALNIZ primitive bölümünde.
   Tema: html[data-theme="light"|"dark"] (theme.js). Öznitelik yoksa
   işletim sistemi tercihi, o da yoksa açık tema.
   ===================================================================== */

/* ---------------- 1. PRIMITIVE ---------------- */
:root {
  /* Kemik / taş (açık) */
  --p-bone-0:   #fdfcf9;
  --p-bone-50:  #faf8f3;
  --p-bone-100: #f2eee6;
  --p-bone-150: #ece6da;
  --p-bone-200: #e4ddcf;
  --p-bone-300: #dcd4c4;
  --p-bone-400: #c2b7a2;
  --p-stone-500: #6c6458;
  --p-stone-600: #5f584d;
  --p-stone-700: #574f45;
  --p-stone-900: #1c1915;

  /* Espresso / krem (koyu) */
  --p-esp-1000: #0e0c0a;
  --p-esp-950: #110f0c;
  --p-esp-900: #15120f;
  --p-esp-850: #1c1814;
  --p-esp-800: #231e19;
  --p-esp-750: #2a241e;
  --p-esp-700: #322b23;
  --p-esp-600: #463d31;
  --p-cream-500: #978b78;
  --p-cream-400: #a59a87;
  --p-cream-300: #b8ad9b;
  --p-cream-100: #efe7da;

  /* Şarap (vurgu) */
  --p-wine-800: #571f2c;
  --p-wine-700: #6b2737;
  --p-wine-100: #f0e2e3;
  --p-rose-200: #f0c3ce;
  --p-rose-300: #e3a0b0;

  /* Anlamsal renkler */
  --p-green-700: #2d6a3e;
  --p-green-100: #e3eedf;
  --p-green-300: #82c792;
  --p-verm-700: #b23a0a;
  --p-verm-100: #f8e6dc;
  --p-verm-300: #f08c5e;
  --p-ochre-700: #8a5a10;
  --p-ochre-100: #f3e9d2;
  --p-ochre-300: #dcab5b;
}

/* ---------------- 2. ÖLÇEKLER (temadan bağımsız) ---------------- */
:root {
  --font-sans: "Geist", "GM Lira Sign", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;

  /* Tipografi — 12 · 13 · 14 · 16 · 18 · 22 · 26 · 32 */
  --t-xs: 0.75rem;
  --t-sm: 0.8125rem;
  --t-base: 0.875rem;
  --t-md: 1rem;
  --t-lg: 1.125rem;
  --t-xl: 1.375rem;
  --t-2xl: 1.625rem;
  --t-3xl: 2rem;
  --w-regular: 400;
  --w-medium: 500;
  --w-semibold: 600;
  --lh-tight: 1.15;
  --lh-snug: 1.3;
  --lh-body: 1.55;
  --track-tight: -0.02em;
  --track-label: 0.08em;

  /* Boşluk — 4 px ızgara */
  --s-0: 0;
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.25rem;
  --s-6: 1.5rem;
  --s-8: 2rem;
  --s-10: 2.5rem;
  --s-12: 3rem;
  --s-16: 4rem;

  /* Köşe — Stüdyo: keskin */
  --r-1: 3px;   /* kontrol */
  --r-2: 4px;   /* kart, tablo */
  --r-3: 6px;   /* pencere, açılır menü */
  --r-full: 999px;

  /* Kontrol yüksekliği */
  --h-sm: 32px;
  --h-md: 38px;
  --h-lg: 44px;
  --h-row: 52px;

  /* Kap genişlikleri */
  --w-content: 1440px;
  --w-prose: 68ch;
  --w-sidebar: 248px;
  --w-sheet: 560px;

  /* Hareket */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --d-fast: 120ms;
  --d-base: 180ms;
  --d-slow: 260ms;

  /* Katman sırası */
  --z-sticky: 10;
  --z-sidebar: 40;
  --z-tabbar: 45;
  --z-dropdown: 60;
  --z-overlay: 80;
  --z-modal: 90;
  --z-toast: 100;
}

/* Dokunmatik / dar ekran: kontroller büyür, metin 16 px (iOS yakınlaştırma yok) */
@media (max-width: 768px), (pointer: coarse) {
  :root {
    --h-sm: 44px;   /* dokunma hedefi alt sınırı */
    --h-md: 44px;
    --h-lg: 48px;
  }
}

/* ---------------- 3. SEMANTIC — AÇIK ---------------- */
:root,
:root[data-theme="light"] {
  color-scheme: light;
  --bg: var(--p-bone-100);
  --bg-sunken: var(--p-bone-150);
  --surface: var(--p-bone-50);
  --surface-raised: var(--p-bone-0);
  --surface-hover: var(--p-bone-150);
  --surface-active: var(--p-bone-200);
  --line: var(--p-bone-300);
  --line-strong: var(--p-bone-400);
  --ink: var(--p-stone-900);
  --ink-2: var(--p-stone-700);
  --ink-3: var(--p-stone-600);
  --ink-inverse: var(--p-bone-50);

  --accent: var(--p-wine-700);
  --accent-hover: var(--p-wine-800);
  --accent-ink: var(--p-bone-50);
  --accent-soft: var(--p-wine-100);
  --accent-text: var(--p-wine-700);

  --pos: var(--p-green-700);
  --pos-soft: var(--p-green-100);
  --neg: var(--p-verm-700);
  --neg-soft: var(--p-verm-100);
  --warn: var(--p-ochre-700);
  --warn-soft: var(--p-ochre-100);

  --focus-ring: var(--p-wine-700);
  --scrim: rgb(28 25 21 / 0.32);
  --shadow-1: 0 1px 2px rgb(28 25 21 / 0.06);
  --shadow-2: 0 1px 2px rgb(28 25 21 / 0.06), 0 8px 24px rgb(28 25 21 / 0.10);
  --shadow-3: 0 1px 2px rgb(28 25 21 / 0.06), 0 24px 64px rgb(28 25 21 / 0.18);
  --chart-1: var(--p-wine-700);
  --chart-2: var(--p-bone-400);
}

/* ---------------- 3b. SEMANTIC — KOYU ---------------- */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: var(--p-esp-900);
  --bg-sunken: var(--p-esp-950);
  --surface: var(--p-esp-850);
  --surface-raised: var(--p-esp-800);
  --surface-hover: var(--p-esp-750);
  --surface-active: var(--p-esp-700);
  --line: var(--p-esp-700);
  --line-strong: var(--p-esp-600);
  --ink: var(--p-cream-100);
  --ink-2: var(--p-cream-300);
  --ink-3: var(--p-cream-400);
  --ink-inverse: var(--p-esp-900);

  --accent: var(--p-rose-300);
  --accent-hover: var(--p-rose-200);
  --accent-ink: var(--p-esp-900);
  --accent-soft: rgb(227 160 176 / 0.13);
  --accent-text: var(--p-rose-300);

  --pos: var(--p-green-300);
  --pos-soft: rgb(130 199 146 / 0.12);
  --neg: var(--p-verm-300);
  --neg-soft: rgb(240 140 94 / 0.12);
  --warn: var(--p-ochre-300);
  --warn-soft: rgb(220 171 91 / 0.12);

  --focus-ring: var(--p-rose-300);
  --scrim: rgb(0 0 0 / 0.55);
  --shadow-1: 0 0 0 1px var(--p-esp-700);
  --shadow-2: 0 0 0 1px var(--p-esp-700), 0 12px 32px rgb(0 0 0 / 0.45);
  --shadow-3: 0 0 0 1px var(--p-esp-700), 0 28px 72px rgb(0 0 0 / 0.6);
  --chart-1: var(--p-rose-300);
  --chart-2: var(--p-esp-600);
}

/* Tema özniteliği henüz atanmamışsa (ilk boya) işletim sistemine uy */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --bg: var(--p-esp-900);
    --bg-sunken: var(--p-esp-950);
    --surface: var(--p-esp-850);
    --surface-raised: var(--p-esp-800);
    --surface-hover: var(--p-esp-750);
    --surface-active: var(--p-esp-700);
    --line: var(--p-esp-700);
    --line-strong: var(--p-esp-600);
    --ink: var(--p-cream-100);
    --ink-2: var(--p-cream-300);
    --ink-3: var(--p-cream-400);
    --ink-inverse: var(--p-esp-900);
    --accent: var(--p-rose-300);
    --accent-hover: var(--p-rose-200);
    --accent-ink: var(--p-esp-900);
    --accent-soft: rgb(227 160 176 / 0.13);
    --accent-text: var(--p-rose-300);
    --pos: var(--p-green-300);
    --pos-soft: rgb(130 199 146 / 0.12);
    --neg: var(--p-verm-300);
    --neg-soft: rgb(240 140 94 / 0.12);
    --warn: var(--p-ochre-300);
    --warn-soft: rgb(220 171 91 / 0.12);
    --focus-ring: var(--p-rose-300);
    --scrim: rgb(0 0 0 / 0.55);
    --shadow-1: 0 0 0 1px var(--p-esp-700);
    --shadow-2: 0 0 0 1px var(--p-esp-700), 0 12px 32px rgb(0 0 0 / 0.45);
    --shadow-3: 0 0 0 1px var(--p-esp-700), 0 28px 72px rgb(0 0 0 / 0.6);
    --chart-1: var(--p-rose-300);
    --chart-2: var(--p-esp-600);
  }
}

/* ---------------- 4. COMPONENT ---------------- */
:root {
  --btn-h: var(--h-md);
  --btn-px: var(--s-4);
  --input-h: var(--h-md);
  --input-bg: var(--surface-raised);
  --input-line: var(--line-strong);
  --card-bg: var(--surface);
  --card-line: var(--line);
  --card-pad: var(--s-5);
  --table-row: var(--h-row);
  --sidebar-bg: var(--bg-sunken);
  --topbar-h: 60px;
  --tabbar-h: 64px;
}