/* ==========================================================================
   Design Tokens — abonelikas.com
   Yön: koyu tech + aurora glow / mor-indigo + turkuaz
   ========================================================================== */

:root {
  /* --- Renk: zeminler ------------------------------------------------- */
  --color-bg: oklch(13% 0.025 280);
  --color-bg-deep: oklch(9% 0.02 280);
  --color-surface: oklch(18% 0.028 280);
  --color-surface-2: oklch(22% 0.032 280);
  --color-glass: oklch(100% 0 0 / 0.045);
  --color-glass-strong: oklch(100% 0 0 / 0.08);
  --color-border: oklch(100% 0 0 / 0.1);
  --color-border-strong: oklch(100% 0 0 / 0.18);

  /* --- Renk: metin ---------------------------------------------------- */
  --color-text: oklch(97% 0.008 280);
  --color-text-soft: oklch(83% 0.015 280);
  --color-text-muted: oklch(68% 0.02 280);
  --color-text-faint: oklch(55% 0.02 280);

  /* --- Renk: marka ---------------------------------------------------- */
  --color-primary: oklch(62% 0.22 288);
  --color-primary-bright: oklch(72% 0.2 290);
  --color-primary-soft: oklch(62% 0.22 288 / 0.16);
  --color-accent: oklch(80% 0.14 196);
  --color-accent-soft: oklch(80% 0.14 196 / 0.16);
  --color-warm: oklch(78% 0.16 45);

  /* --- Renk: semantik ------------------------------------------------- */
  --color-success: oklch(78% 0.16 155);
  --color-star: oklch(84% 0.15 88);

  /* --- Gradyanlar ----------------------------------------------------- */
  --gradient-brand: linear-gradient(
    135deg,
    var(--color-primary) 0%,
    oklch(66% 0.2 320) 48%,
    var(--color-accent) 100%
  );
  --gradient-text: linear-gradient(
    100deg,
    oklch(98% 0.01 280) 0%,
    oklch(85% 0.12 300) 45%,
    var(--color-accent) 100%
  );
  --gradient-surface: linear-gradient(
    160deg,
    oklch(100% 0 0 / 0.07) 0%,
    oklch(100% 0 0 / 0.015) 60%,
    oklch(100% 0 0 / 0) 100%
  );

  /* --- Tipografi ------------------------------------------------------ */
  --font-display: "Space Grotesk", "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", "JetBrains Mono", monospace;

  --text-micro: 0.6875rem;
  --text-xs: 0.78rem;
  --text-sm: 0.875rem;
  --text-base: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  --text-lg: clamp(1.0625rem, 1rem + 0.35vw, 1.1875rem);
  --text-xl: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --text-h3: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem);
  --text-h2: clamp(1.875rem, 1.4rem + 2.4vw, 3.25rem);
  --text-hero: clamp(2.25rem, 1.3rem + 4.6vw, 4.5rem);
  --text-stat: clamp(2rem, 1.3rem + 2.6vw, 3.25rem);

  --leading-tight: 1.04;
  --leading-snug: 1.22;
  --leading-normal: 1.65;
  --tracking-tight: -0.03em;
  --tracking-wide: 0.02em;
  --tracking-label: 0.16em;

  /* --- Boşluk --------------------------------------------------------- */
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4.5rem;
  --space-section: clamp(4.5rem, 3rem + 7vw, 9.5rem);
  --space-gutter: clamp(1.25rem, 0.75rem + 2.5vw, 2.5rem);

  /* --- Ölçü ----------------------------------------------------------- */
  --width-page: 78rem;
  --width-prose: 42rem;
  --width-narrow: 34rem;

  /* --- Radius --------------------------------------------------------- */
  --radius-xs: 0.375rem;
  --radius-sm: 0.625rem;
  --radius-md: 1rem;
  --radius-lg: 1.5rem;
  --radius-xl: 2rem;
  --radius-pill: 999px;

  /* --- Gölge / ışık --------------------------------------------------- */
  --shadow-sm: 0 1px 2px oklch(0% 0 0 / 0.3);
  --shadow-md: 0 12px 28px -12px oklch(0% 0 0 / 0.5);
  --shadow-lg: 0 32px 60px -24px oklch(0% 0 0 / 0.65);
  --shadow-glow: 0 0 0 1px oklch(100% 0 0 / 0.06), 0 24px 70px -30px oklch(62% 0.22 288 / 0.75);
  --shadow-inset: inset 0 1px 0 oklch(100% 0 0 / 0.08);

  /* --- Motion --------------------------------------------------------- */
  --duration-instant: 120ms;
  --duration-fast: 200ms;
  --duration-normal: 380ms;
  --duration-slow: 700ms;
  --duration-reveal: 900ms;
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.46, 0.64, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  /* --- Katmanlar ------------------------------------------------------ */
  --z-aurora: 0;
  --z-content: 1;
  --z-nav: 50;
  --z-overlay: 90;

  /* --- Dokunma alanı -------------------------------------------------- */
  --tap-min: 44px;

  color-scheme: dark;
}