/* Eachlang tasarım tokenları (T166, yeniden eşitleme: run-2026-11-05T09:27)
 * Kaynak: design_system/tokens/{spacing,typography,colors,effects}.css (Claude Design, a393408). Değerler birebir;
 * bu dosyayı elle düzenlemeyin, kaynak değişirse tasarim/araclar/tokens_uret.py ile yeniden üretin.
 * Repo eklemeleri (kaynakta yok): (1) data-theme yoksa sistem koyu tercihi (@media prefers-color-scheme) koyu değerleri uygular;
 * data-theme="light" her zaman açık tutar. Sıra önemli: açık → sistem koyu → [data-theme="dark"] → [data-surface="app"]
 * (hepsi 0,1,0 özgüllükte; app yüzeyi en sonda olduğu için koyu temada da birincil = accent kalır).
 * Fontlar burada YÜKLENMEZ (render engellememek için); <head>'e ekleyin:
 *   <link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 *   <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Figtree:wght@400;500;600;700&family=Manrope:wght@500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap">
 * Wordmark logo SVG'lerinde path; ayrı font yok.
 * Yüzeyler: pazarlama = varsayılan (açık, siyah birincil düğme). Panel ve doküman: <body data-surface="app" data-theme="dark">
 *   (birincil düğme logo mavisi #4560FC olur, kontroller 36 px / 8 px).
 * Kontrast: tasarim/araclar/kontrast.py (sonuç tasarim/README.md §Kontrast).
 */

/* ---------- Ölçek: boşluk, köşe, kapsayıcı, uygulama kabuğu ---------- */
:root {
  /* 4px base */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 24px;
  --radius-3xl: 32px;
  --radius-pill: 999px;

  --container: 1180px;
  --container-narrow: 880px;
  --stage-max: 888px;

  /* App shell */
  --rail-w: 44px;
  --subnav-w: 225px;
  --assist-w: 340px;
  --app-header-h: 56px;
}

/* ---------- Tipografi ---------- */
:root {
  --font-display: 'Manrope', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'Figtree', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-wordmark: var(--font-display); /* wordmark is outlined in the logo SVGs */

  /* Headings: 600, negative tracking (~-1.5px at 40px), tight leading. */
  --text-display: 600 clamp(40px, 5vw, 56px)/1.06 var(--font-display);
  --text-h1: 600 clamp(32px, 3.6vw, 40px)/1.1 var(--font-display);
  --text-h2: 600 clamp(26px, 2.6vw, 32px)/1.15 var(--font-display);
  --text-h3: 600 22px/1.25 var(--font-display);
  --text-h4: 600 17px/1.35 var(--font-display);
  --text-body-lg: 400 17px/1.55 var(--font-body);
  --text-body: 400 15px/1.6 var(--font-body);
  --text-small: 400 14px/1.5 var(--font-body);
  --text-xs: 500 12.5px/1.4 var(--font-body);
  --text-label: 600 11px/1.2 var(--font-body);
  --text-mono: 400 13.5px/1.65 var(--font-mono);

  --tracking-display: -0.04em;
  --tracking-h1: -0.0375em;
  --tracking-h2: -0.03em;
  --tracking-h3: -0.02em;
  --tracking-h4: -0.01em;
  --tracking-label: 0.06em;
}

.el-display { font: var(--text-display); letter-spacing: var(--tracking-display); margin: 0; text-wrap: balance; }
.el-h1 { font: var(--text-h1); letter-spacing: var(--tracking-h1); margin: 0; text-wrap: balance; }
.el-h2 { font: var(--text-h2); letter-spacing: var(--tracking-h2); margin: 0; text-wrap: balance; }
.el-h3 { font: var(--text-h3); letter-spacing: var(--tracking-h3); margin: 0; }
.el-h4 { font: var(--text-h4); letter-spacing: var(--tracking-h4); margin: 0; }
.el-body-lg { font: var(--text-body-lg); margin: 0; text-wrap: pretty; }
.el-body { font: var(--text-body); margin: 0; text-wrap: pretty; }
.el-small { font: var(--text-small); margin: 0; }
.el-xs { font: var(--text-xs); margin: 0; }
.el-label { font: var(--text-label); letter-spacing: var(--tracking-label); text-transform: uppercase; margin: 0; color: var(--text-muted); }
.el-mono { font: var(--text-mono); }
.el-muted { color: var(--text-muted); }
.el-accent { color: var(--accent-text); }

/* ---------- Renk: açık (varsayılan) ---------- */
:root {
  /* Brand primitives (logo, 7.11.2026: three stacked pills). Logo colours: blue #7386FD, pink #FC4598,
     orange #FD8A33; overlaps violet #8335F3 and red #FF4357. UI accent = the logo blue darkened to carry white text. */
  --el-periwinkle-300: #A4BAFF;
  --el-blue-400: #7386FD;
  --el-blue-500: #4560FC;
  --el-blue-600: #3049F0;
  --el-blue-900: #1C237A;
  --el-violet-500: #8335F3;
  --el-pink-500: #FC4598;
  --el-red-400: #FF4357;
  --el-orange-400: #FD8A33;
  --el-amber-300: #FEBC65;
  /* Legacy names kept for existing references */
  --el-coral-400: var(--el-pink-500);
  --el-peach-300: var(--el-amber-300);
  --el-navy-900: #0C0F22;
  --el-ink-950: #0B0C0F;

  /* Light: marketing + light panel (cool gray) */
  --bg: #F8F6F3;
  --bg-subtle: #F2EFEA;
  --surface: #FFFFFF;
  --surface-subtle: #FBFAF8;
  --surface-sunken: #F1EEE9;
  --input-bg: #FFFFFF;
  --text: #0C0F22;
  --text-muted: #5D5966;
  --text-placeholder: #6E6A76;
  --border: #E9E4DD;
  --border-strong: #8E8893;

  /* Primary = ink on marketing. Inside [data-surface="app"] it becomes the accent. */
  --primary: #0C0F22;
  --primary-hover: #262A44;
  --on-primary: #FFFFFF;
  --primary-text: #0B0C0F;
  --primary-soft: #F1EEE9;
  --primary-ring: rgba(11, 12, 15, 0.12);

  --accent: #4560FC;
  --accent-hover: #3049F0;
  --on-accent: #FFFFFF;
  --accent-text: #3A54F5;
  --accent-soft: #ECEFFF;
  --link: #3A54F5;
  --focus: #E0307F;
  --focus-ring: rgba(252, 69, 152, 0.30);

  /* Semantic */
  --success: #107545;  --success-soft: #E5F6EC; --success-border: #BCE3CB;
  --warning: #8F5A00;  --warning-soft: #FDF3DC; --warning-border: #F0D49E;
  --danger:  #C4283F;  --danger-soft:  #FCEBEC; --danger-border:  #F2C2C8;
  --danger-solid: #C4283F; --danger-solid-hover: #A81F35; --danger-ring: rgba(196, 40, 64, 0.2);
  --info:    #3A54F5;  --info-soft:    #ECEFFF; --info-border:    #C8D0FE;
  --neutral-soft: #F1EEE9; --neutral-text: #4A4652; --neutral-border: #E2DDD5;

  /* Data series (metric dots, charts) */
  --series-1: #4560FC; --series-2: #13A66A; --series-3: #E0A21B; --series-4: #FC4598; --series-5: #8335F3;

  /* Code (always dark) */
  --code-bg: #0E1124;
  --code-text: #E6E7EA;
  --code-muted: #9A9DA6;
  --code-border: rgba(255, 255, 255, 0.08);
  --code-key: #A4BAFF; --code-str: #FFC29A; --code-num: #8FE0B5;

  /* Skeleton */
  --skeleton: #ECE8E2;
  --skeleton-strong: #E0DBD3;

  /* Brand gradient (tiny accents only) */
  --gradient-brand: linear-gradient(100deg, #7386FD 0%, #8335F3 33%, #FC4598 66%, #FD8A33 100%);
  --gradient-brand-soft: linear-gradient(135deg, #EEF1FF 0%, #FCEBF4 50%, #FFF1E3 100%);
  /* Icon tile for empty states: logo blue to peach */
  --gradient-tile: linear-gradient(165deg, #8EA0FF 0%, #F58CC0 55%, #FFC98A 100%);

  /* Stage gradients: large, blurred, light-leak fields behind marketing UI fragments. Mostly blue. */
  --stage-blue:
    radial-gradient(55% 70% at 88% 6%, rgba(196, 212, 255, 0.95) 0%, rgba(196, 212, 255, 0) 70%),
    radial-gradient(50% 70% at 0% 100%, rgba(252, 69, 152, 0.55) 0%, rgba(252, 69, 152, 0) 70%),
    radial-gradient(38% 60% at 55% 65%, rgba(115, 134, 253, 0.9) 0%, rgba(115, 134, 253, 0) 70%),
    linear-gradient(135deg, #2B2FA0 0%, #4560FC 45%, #7386FD 75%, #A4BAFF 100%);
  --stage-violet:
    radial-gradient(50% 70% at 90% 10%, rgba(164, 186, 255, 0.85) 0%, rgba(164, 186, 255, 0) 70%),
    radial-gradient(55% 80% at 0% 95%, rgba(252, 69, 152, 0.7) 0%, rgba(252, 69, 152, 0) 70%),
    linear-gradient(135deg, #3A1E8C 0%, #8335F3 50%, #C24BD6 100%);
  --stage-coral:
    radial-gradient(55% 75% at 6% 100%, rgba(253, 138, 51, 0.85) 0%, rgba(253, 138, 51, 0) 70%),
    radial-gradient(50% 70% at 92% 8%, rgba(164, 186, 255, 0.8) 0%, rgba(164, 186, 255, 0) 70%),
    linear-gradient(150deg, #8335F3 0%, #FC4598 50%, #FF6A5C 80%, #FEBC65 100%);
  --stage-peach:
    radial-gradient(55% 70% at 92% 92%, rgba(254, 188, 101, 0.95) 0%, rgba(254, 188, 101, 0) 70%),
    radial-gradient(50% 70% at 6% 6%, rgba(115, 134, 253, 0.8) 0%, rgba(115, 134, 253, 0) 70%),
    linear-gradient(160deg, #FC4598 0%, #FD8A33 55%, #FEBC65 100%);
  --stage-deep:
    radial-gradient(50% 80% at 20% 0%, rgba(115, 134, 253, 0.55) 0%, rgba(115, 134, 253, 0) 70%),
    radial-gradient(45% 70% at 95% 100%, rgba(252, 69, 152, 0.45) 0%, rgba(252, 69, 152, 0) 70%),
    radial-gradient(35% 55% at 70% 100%, rgba(253, 138, 51, 0.3) 0%, rgba(253, 138, 51, 0) 70%),
    linear-gradient(160deg, #0A0E22 0%, #1E1F6E 55%, #4560FC 100%);

  /* Icons + illustrations (sprite reads these through inherited custom properties) */
  --el-tint: rgba(252, 69, 152, 0.14);
  --el-overlap: #8335F3;
  --el-knock: var(--surface);
  --el-accent: var(--accent);
  --el-empty-ink: var(--text-muted);

  color-scheme: light;
  --highlight: #C8186F;
  --highlight-soft: #FFEAF3;
  --highlight-border: #FFC7DE;
  --highlight-solid: #D81F78;

}

/* ---------- Gölge, odak halkası, hareket ---------- */
:root {
  --shadow-xs: 0 1px 2px rgba(16, 24, 40, 0.06);
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.04), 0 2px 8px -2px rgba(16, 24, 40, 0.06);
  --shadow-md: 0 2px 4px rgba(16, 24, 40, 0.04), 0 12px 28px -10px rgba(16, 24, 40, 0.16);
  --shadow-lg: 0 2px 6px rgba(16, 24, 40, 0.05), 0 28px 64px -20px rgba(16, 24, 40, 0.26);
  /* UI fragments floating on stage gradients */
  --shadow-float: 0 2px 4px rgba(12, 18, 70, 0.08), 0 24px 56px -14px rgba(12, 18, 70, 0.42);
  /* Highlighted pricing card */
  --shadow-featured: 0 40px 70px -30px rgba(40, 56, 180, 0.45);
  --shadow-btn: none;
  --ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--focus);

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 120ms;
  --dur: 200ms;
  --dur-slow: 360ms;
  /* Scenes + signature "overlap" move */
  --ease-leaf: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-scene: 700ms;
  --dur-hero: 1400ms;
}
[data-theme="dark"] {
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3), 0 2px 8px -2px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.3), 0 12px 28px -8px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.3), 0 28px 64px -16px rgba(0, 0, 0, 0.6);
}
@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; --dur: 0ms; --dur-slow: 0ms; --dur-scene: 0ms; --dur-hero: 0ms; }
}

/* ---------- Koyu tema: sistem tercihi (data-theme yoksa; repo eklemesi) ---------- */
@media (prefers-color-scheme: dark) {
  :where(:root):not([data-theme="light"]) {
    --bg: #0A0E22;
    --bg-subtle: #0C1027;
    --surface: #11162F;
    --surface-subtle: #151A36;
    --surface-sunken: #1A2040;
    --input-bg: #080B1C;
    --text: #E9EBF5;
    --text-muted: #9EA3BF;
    --text-placeholder: #868CA8;
    --border: rgba(150, 163, 230, 0.16);
    --border-strong: rgba(150, 163, 230, 0.6);

    --primary: #E6E7EA;
    --primary-hover: #FFFFFF;
    --on-primary: #171718;
    --primary-text: #E6E7EA;
    --primary-soft: #29292D;
    --primary-ring: rgba(230, 231, 234, 0.16);

    --accent: #4560FC;
    --accent-hover: #3A54F5;
    --on-accent: #FFFFFF;
    --accent-text: #9AAEFF;
    --accent-soft: rgba(69, 96, 252, 0.22);
    --link: #9AAEFF;
    --focus: #FF7DB8;
    --focus-ring: rgba(252, 69, 152, 0.35);

    --success: #4CC38A;  --success-soft: #13291E; --success-border: #1F4A33;
    --warning: #E9B949;  --warning-soft: #2E2611; --warning-border: #5A4719;
    --danger:  #FF7A8A;  --danger-soft:  #36161D; --danger-border:  #64263A;
    --danger-solid: #D0344C; --danger-solid-hover: #B82A41; --danger-ring: rgba(255, 122, 138, 0.28);
    --info:    #9AAEFF;  --info-soft:    #1C2045; --info-border:    #2E3675;
    --neutral-soft: #1A2040; --neutral-text: #C6CADC; --neutral-border: rgba(150, 163, 230, 0.2);

    --series-1: #7386FD; --series-2: #4CC38A; --series-3: #E9B949; --series-4: #FC5FA8; --series-5: #A06BF7;

    --code-bg: #070A19;
    --code-border: rgba(150, 163, 230, 0.14);

    --skeleton: #1C2245;
    --skeleton-strong: #262D55;
    --gradient-brand-soft: linear-gradient(135deg, #151B3F 0%, #2A1838 50%, #2E1F22 100%);
    --el-tint: rgba(252, 69, 152, 0.18);
    --el-accent: var(--accent-text);
    color-scheme: dark;

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3), 0 2px 8px -2px rgba(0, 0, 0, 0.35);
    --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.3), 0 12px 28px -8px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.3), 0 28px 64px -16px rgba(0, 0, 0, 0.6);
    --highlight: #FF7DB8;
    --highlight-soft: rgba(252, 69, 152, 0.18);
    --highlight-border: rgba(252, 69, 152, 0.4);
    --highlight-solid: #D81F78;
  
  }
}

/* ---------- Renk: koyu (açıkça seçilmiş) ve app yüzeyi ---------- */
/* Dark: app panel + docs */
[data-theme="dark"] {
  --bg: #0A0E22;
  --bg-subtle: #0C1027;
  --surface: #11162F;
  --surface-subtle: #151A36;
  --surface-sunken: #1A2040;
  --input-bg: #080B1C;
  --text: #E9EBF5;
  --text-muted: #9EA3BF;
  --text-placeholder: #868CA8;
  --border: rgba(150, 163, 230, 0.16);
  --border-strong: rgba(150, 163, 230, 0.6);

  --primary: #E6E7EA;
  --primary-hover: #FFFFFF;
  --on-primary: #171718;
  --primary-text: #E6E7EA;
  --primary-soft: #29292D;
  --primary-ring: rgba(230, 231, 234, 0.16);

  --accent: #4560FC;
  --accent-hover: #3A54F5;
  --on-accent: #FFFFFF;
  --accent-text: #9AAEFF;
  --accent-soft: rgba(69, 96, 252, 0.22);
  --link: #9AAEFF;
  --focus: #FF7DB8;
  --focus-ring: rgba(252, 69, 152, 0.35);

  --success: #4CC38A;  --success-soft: #13291E; --success-border: #1F4A33;
  --warning: #E9B949;  --warning-soft: #2E2611; --warning-border: #5A4719;
  --danger:  #FF7A8A;  --danger-soft:  #36161D; --danger-border:  #64263A;
  --danger-solid: #D0344C; --danger-solid-hover: #B82A41; --danger-ring: rgba(255, 122, 138, 0.28);
  --info:    #9AAEFF;  --info-soft:    #1C2045; --info-border:    #2E3675;
  --neutral-soft: #1A2040; --neutral-text: #C6CADC; --neutral-border: rgba(150, 163, 230, 0.2);

  --series-1: #7386FD; --series-2: #4CC38A; --series-3: #E9B949; --series-4: #FC5FA8; --series-5: #A06BF7;

  --code-bg: #070A19;
  --code-border: rgba(150, 163, 230, 0.14);

  --skeleton: #1C2245;
  --skeleton-strong: #262D55;
  --gradient-brand-soft: linear-gradient(135deg, #151B3F 0%, #2A1838 50%, #2E1F22 100%);
  --el-tint: rgba(252, 69, 152, 0.18);
  --el-accent: var(--accent-text);
  color-scheme: dark;
  --highlight: #FF7DB8;
  --highlight-soft: rgba(252, 69, 152, 0.18);
  --highlight-border: rgba(252, 69, 152, 0.4);
  --highlight-solid: #D81F78;

}

/* Product surfaces: accent becomes primary, controls tighten (36px, 8px). */
[data-surface="app"] {
  --primary: var(--accent);
  --primary-hover: var(--accent-hover);
  --on-primary: #FFFFFF;
  --primary-text: var(--accent-text);
  --primary-soft: var(--accent-soft);
  --primary-ring: var(--focus-ring);
  --btn-h: 36px; --btn-px: 14px; --btn-fs: 14px; --btn-fw: 400; --btn-radius: 8px;
  --btn-secondary-bg: var(--surface); --btn-secondary-border: var(--border-strong);
  --input-h: 36px; --input-radius: 8px;
  --card-radius: 16px;
  --badge-radius: 6px;
}