/* =========================================================
   OPUZE AI — TASARIM SİSTEMİ (design tokens)
   Tüm renk, yazı, aralık, kenar, gölge, hareket ve katman değerleri
   burada tanımlıdır. Bileşenler (style.css) yalnızca bu değişkenleri kullanır.
   Temel: ui-design-system üreticisi (modern stil, 8pt ızgara, 1.25 ölçek),
   Opuze AI'ın koyu, mor-pembe paletine uyarlandı. Sarı/turuncu ton yok.
   ========================================================= */
:root {
  /* ---------- Renk: marka ---------- */
  --violet-50:  #f5f3ff;
  --violet-100: #ede9fe;
  --violet-200: #ddd6fe;
  --violet-300: #c4b5fd;
  --violet-400: #a78bfa;
  --violet-500: #8b5cf6;   /* ana renk */
  --violet-600: #7c3aed;
  --violet-700: #6d28d9;
  --violet-800: #4c1d95;
  --violet-900: #2e1065;

  --pink-200: #f5d0fe;
  --pink-300: #f0abfc;     /* vurgu */
  --pink-400: #e879f9;
  --pink-500: #d946ef;

  --cyan-300: #67e8f9;     /* yalnızca glitch renk kayması */

  /* ---------- Renk: nötr (koyu yüzeyler) ---------- */
  --ink-0:   #07040d;      /* sayfa zemini */
  --ink-50:  #0e0819;
  --ink-100: #150b26;
  --ink-200: #1f1433;
  --ink-300: #2c2145;
  --ink-500: #6c6585;
  --ink-600: #a39cba;
  --ink-900: #ece8f5;      /* ana yazı */

  /* ---------- Renk: anlamsal ---------- */
  --color-bg: var(--ink-0);
  --color-surface: var(--ink-50);
  --color-surface-2: var(--ink-100);
  --color-text: var(--ink-900);
  --color-text-muted: var(--ink-600);
  --color-text-dim: var(--ink-500);
  --color-accent: var(--pink-300);
  --color-primary: var(--violet-500);
  --color-line: rgba(236, 232, 245, 0.10);
  --color-line-strong: rgba(236, 232, 245, 0.18);
  --color-glass: rgba(14, 8, 25, 0.48);
  --color-glass-strong: rgba(7, 4, 13, 0.86);
  --color-overlay-top: rgba(7, 4, 13, 0.75);
  --color-tint: rgba(139, 92, 246, 0.08);
  --color-tint-strong: rgba(139, 92, 246, 0.22);

  --gradient-brand: linear-gradient(90deg, var(--violet-600), var(--violet-400) 30%, var(--pink-300) 65%, #e9d5ff);
  --gradient-row: linear-gradient(90deg, rgba(139,92,246,.22), rgba(240,171,252,.12), rgba(233,213,255,.08));

  /* ---------- Yazı ---------- */
  --font-display: "Unbounded", "JetBrains Mono", sans-serif;
  --font-mono: "JetBrains Mono", "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-label: "Space Mono", "JetBrains Mono", ui-monospace, monospace;

  /* 1.25 modüler ölçek, ekrana göre akışkan */
  --text-2xs: 11px;
  --text-xs: 12px;
  --text-sm: 14px;
  --text-base: 15px;
  --text-lg: clamp(16px, 1.5vw, 19px);
  --text-xl: clamp(20px, 2vw, 28px);
  --text-2xl: clamp(26px, 3.4vw, 48px);
  --text-3xl: clamp(34px, 5.6vw, 84px);
  --text-4xl: clamp(44px, 9vw, 150px);

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-black: 800;

  --leading-none: 1;
  --leading-tight: 1.05;
  --leading-snug: 1.15;
  --leading-body: 1.65;

  --tracking-display: -0.045em;
  --tracking-tight: -0.02em;
  --tracking-label: 0.16em;
  --tracking-wide: 0.08em;

  /* ---------- Aralık: 8pt ızgara ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 48px;
  --space-11: 64px;
  --space-13: 80px;
  --space-14: 96px;
  --space-16: 128px;
  --space-section: clamp(80px, 12vw, 160px);
  --space-gutter: clamp(16px, 4vw, 48px);

  /* ---------- Boyut ---------- */
  --container: 1320px;
  --header-h: 72px;
  --btn-h: 48px;
  --icon-md: 22px;

  /* ---------- Kenar ---------- */
  --radius-none: 0;          /* marka dili: keskin köşe */
  --radius-full: 9999px;
  --border: 1px solid var(--color-line);
  --border-strong: 1px solid var(--color-line-strong);

  /* ---------- Gölge / parıltı ---------- */
  --glow-sm: 0 0 10px rgba(240, 171, 252, 0.6);
  --glow-md: 0 0 24px rgba(167, 139, 250, 0.45);
  --glow-title: drop-shadow(0 0 30px rgba(233, 213, 255, 0.18));
  --blur-glass: blur(18px) saturate(1.2);
  --blur-soft: blur(10px);

  /* ---------- Hareket (GSAP ile aynı değerler) ---------- */
  --dur-fast: 150ms;
  --dur-base: 300ms;
  --dur-slow: 600ms;
  --dur-slower: 1000ms;
  --ease-out: cubic-bezier(.2, .75, .15, 1);       /* GSAP: expo.out yakını */
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);     /* GSAP: power3.inOut */

  /* ---------- Katmanlar ---------- */
  --z-bg: 0;
  --z-fx: 1;
  --z-content: 2;
  --z-menu: 49;
  --z-header: 50;
  --z-cursor: 80;
  --z-transition: 90;

  /* ---------- Kırılım noktaları (referans; medya sorgularında sayı olarak) ----------
     sm 560px · md 980px · lg 1280px */
}