/* OverlayX — tasarım belirteçleri. Ayrıntılar: DESIGN-SYSTEM.md */
:root {
  color-scheme: dark;

  /* renk */
  --bg: #101114;
  --bg-2: #17191E;
  --surface: #1D2026;
  --surface-2: #23262D;
  --border: #2B2E35;
  --border-2: #3A3E47;
  --text: #F3F3F1;
  --text-2: #92959E;
  --text-3: #6C707A;
  --accent: #C6FF4D;
  --accent-ink: #101114;
  --accent-soft: rgba(198, 255, 77, .1);
  --mint: #5CF2C4;                 /* 3. renk: bilgi ve durum vurgusu (yeni, canlı, başarılı, adım) */
  --mint-soft: rgba(92, 242, 196, .1);
  --danger: #FF8A7A;

  /* yazı */
  --f-head: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  --f-body: "Inter", "Segoe UI", system-ui, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, Consolas, monospace;
  --fs-display: clamp(2.25rem, 1.6rem + 2.4vw, 3.5rem);
  --fs-h1: clamp(2rem, 1.6rem + 1.5vw, 2.75rem);
  --fs-h2: clamp(1.5rem, 1.3rem + .8vw, 2rem);
  --fs-h3: 1.25rem;
  --fs-body: 1rem;
  --fs-sm: .875rem;
  --fs-label: .75rem;

  /* boşluk (4 px taban) */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px;
  --section: var(--s-9);

  /* biçim */
  --r-1: 4px;
  --r-2: 6px;
  --r-3: 10px;
  --container: 1240px;
  --gutter: 16px;
  --header-h: 64px;

  /* hareket */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --t-fast: 150ms;
  --t: 220ms;
}

@media (min-width: 640px) { :root { --gutter: 24px; } }
@media (min-width: 1024px) { :root { --gutter: 32px; } }
@media (max-width: 767px) { :root { --section: var(--s-8); } }