/* ============================================================
   Yake Store · Satıcı Merkezi — Ortak Tasarım Token'ları
   Yön: SİYAH-BEYAZ MÜREKKEP · galeri-minimal lüks
   Tek aksan: sıcak kum. Başlık Fraunces (serif), gövde Inter.
   Mimari: PRIMITIVES → SEMANTIC (tema değiştirir) → COMPONENT (sadece semantic okur)
   ============================================================ */

:root {
  color-scheme: light;

  /* ---- PRIMITIVES — ham, asla yeniden temalanmaz ---- */
  /* Mürekkep / sıcak-nötr rampa */
  --ink-950: #0a0a0a;
  --ink-900: #151513;
  --ink-800: #1f1f1b;
  --ink-700: #2a2925;
  --ink-600: #3b3a33;
  --ink-500: #56554d;
  --ink-400: #6f6e66;
  --ink-300: #9c9a90;
  --ink-200: #cbc9bf;
  --ink-150: #e1dfd6;
  --ink-100: #eeece4;
  --ink-50: #f6f5f1;
  --white: #ffffff;

  /* Tek aksan: sıcak kum */
  --sand-700: #6e5f49;
  --sand-600: #8a7a63;
  --sand-500: #a8967c;
  --sand-400: #c8b9a6; /* seçilen aksan */
  --sand-300: #ddd2c2;
  --sand-100: #f0eadf;

  /* Sessiz/topraksı durum tonları (parlak SaaS değil) */
  --ok-700: #2f5d40;
  --ok-500: #3d7a55;
  --ok-300: #7faa86;
  --warn-700: #8a6a1c;
  --warn-500: #a9831f;
  --warn-300: #d8b25a;
  --bad-700: #8c3b34;
  --bad-500: #a8453c;
  --bad-300: #cf837a;

  /* ---- SEMANTIC (LIGHT) ---- */
  --color-bg: var(--ink-50);
  --color-surface: #ffffff;
  --color-surface-2: #efeee7;
  --color-surface-3: #e6e4db;
  --color-overlay: rgba(10, 10, 10, 0.5);

  --color-text: var(--ink-950);
  --color-text-soft: #4a4944;
  --color-muted: #67665e;

  --color-border: #e7e5dc;
  --color-border-strong: #d6d4ca;

  --color-primary: var(--ink-950); /* aksiyon = mürekkep siyahı */
  --color-primary-hover: #2c2c28;
  --color-primary-soft: rgba(10, 10, 10, 0.06);
  --color-on-primary: #ffffff;

  --color-accent: var(--sand-400);
  --color-accent-soft: rgba(200, 185, 166, 0.32);

  --color-pos: var(--ok-700);
  --color-pos-soft: rgba(47, 93, 64, 0.12);
  --color-prog: var(--sand-700); /* kabul/işlemde — kum/kahve tonu */
  --color-prog-soft: rgba(200, 185, 166, 0.34);
  --color-warn: var(--warn-700);
  --color-warn-soft: rgba(169, 131, 31, 0.16);
  --color-neg: var(--bad-700);
  --color-neg-soft: rgba(140, 59, 52, 0.1);

  --color-focus: var(--ink-950);

  /* ---- Şekil (editöryal-keskin) ---- */
  --radius: 4px;
  --radius-md: 3px;
  --radius-sm: 2px;
  --radius-pill: 999px;

  /* ---- Gölge (nötr, çok hafif; galeri-düz) ---- */
  --shadow-sm: 0 1px 2px rgba(20, 20, 18, 0.04);
  --shadow: 0 1px 2px rgba(20, 20, 18, 0.04), 0 12px 30px rgba(20, 20, 18, 0.07);
  --shadow-lg: 0 24px 60px rgba(20, 20, 18, 0.16);

  /* ---- Hareket ---- */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in-out: cubic-bezier(0.45, 0, 0.2, 1);
  --dur-fast: 160ms;
  --dur-base: 240ms;

  /* ---- Ölçü ---- */
  --sidebar-w: 256px;
  --topbar-h: 64px;
  --content-max: 1200px;

  /* ---- Tipografi ---- */
  --font-display: 'Fraunces', 'Times New Roman', Georgia, serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, Consolas, monospace;

  /* Akışkan ölçek — uçlar rem, max ≤ 2.5× min (WCAG 1.4.4) */
  --step-eyebrow: clamp(0.72rem, 0.69rem + 0.15vw, 0.8rem);
  --step-body-sm: clamp(0.84rem, 0.81rem + 0.16vw, 0.95rem);
  --step-body: clamp(0.95rem, 0.92rem + 0.18vw, 1.0625rem);
  --step-h4: clamp(0.95rem, 0.92rem + 0.18vw, 1.0625rem);
  --step-h3: clamp(1.1rem, 1.02rem + 0.34vw, 1.35rem);
  --step-h2-panel: clamp(1.3rem, 1.13rem + 0.78vw, 1.7rem);
  --step-stat: clamp(1.7rem, 1.4rem + 1.2vw, 2.4rem);
  --step-h2: clamp(2rem, 1.4rem + 2.4vw, 3.25rem);
  --step-h1: clamp(2.75rem, 0.75rem + 6vw, 6rem);
  --step-stat-landing: clamp(2.25rem, 1.5rem + 2.5vw, 3.5rem);
}

/* ---- SEMANTIC (DARK) — galeri-siyah, krem aksiyon, kum aksan ---- */
[data-theme='dark'] {
  color-scheme: dark;
  --color-bg: #060605;
  --color-surface: #1a1a17;
  --color-surface-2: #232320;
  --color-surface-3: #2d2c28;
  --color-overlay: rgba(0, 0, 0, 0.66);

  --color-text: #f3f2ec;
  --color-text-soft: #b8b6ac;
  --color-muted: #8e8c83;

  --color-border: #2d2c26;
  --color-border-strong: #3f3e37;

  --color-primary: #f3f2ec; /* aksiyon = krem (koyu metin) */
  --color-primary-hover: #ffffff;
  --color-primary-soft: rgba(243, 242, 236, 0.1);
  --color-on-primary: #0a0a0a;

  --color-accent: var(--sand-400);
  --color-accent-soft: rgba(200, 185, 166, 0.18);

  --color-pos: var(--ok-300);
  --color-pos-soft: rgba(127, 170, 134, 0.16);
  --color-prog: var(--sand-300);
  --color-prog-soft: rgba(200, 185, 166, 0.18);
  --color-warn: var(--warn-300);
  --color-warn-soft: rgba(216, 178, 90, 0.16);
  --color-neg: var(--bad-300);
  --color-neg-soft: rgba(207, 131, 122, 0.16);

  --color-focus: #f3f2ec;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.45);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.45), 0 14px 34px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.62);
}

/* ============================================================
   Ortak temel — her iki yüzeyin paylaştığı reset + tipografi
   ============================================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--step-body);
  line-height: 1.55;
  background: var(--color-bg);
  color: var(--color-text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.005em;
  line-height: 1.12;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  display: block;
  max-width: 100%;
}

code,
.u-mono {
  font-family: var(--font-mono);
}

code {
  font-size: 0.86em;
  background: var(--color-surface-2);
  padding: 1px 6px;
  border-radius: var(--radius-sm);
}

/* WCAG 2.4.11 — yalnız klavye için iki katmanlı focus ring */
:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--color-surface), 0 0 0 4px var(--color-focus);
  border-radius: var(--radius-sm);
}

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

/* ============================================================
   Hareket — no-motion-first; sadece transform/opacity
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}