/* =========================================================
   TASARIM TOKEN'LARI
   Üç katman: primitive (ham değerler) → semantic (anlam) → component (bileşen)
   Bileşenler yalnızca semantic/component token'larını kullanır;
   tema değişince sadece semantic katman yeniden eşlenir.

   Yön: bento ızgara + kinetik tipografi.
   Gece indigosu zemin, elektrik moru + gök mavisi ikilisi, "canlı" durumlar için kehribar.
   ========================================================= */

/* ---------- 1) PRIMITIVE ---------- */
:root {
  /* İndigo skala */
  --indigo-50: #f6f5fd;
  --indigo-100: #edebf7;
  --indigo-200: #dcd8f0;
  --indigo-300: #c3bde6;
  --indigo-500: #7a74a8;
  --indigo-600: #5d5880;
  --indigo-700: #3b3768;
  --indigo-800: #2e2a52;
  --indigo-850: #1f1c3a;
  --indigo-900: #15132b;
  --indigo-950: #1a1733;
  --indigo-ink: #f1effc;
  --indigo-ink-muted: #a7a2c9;

  /* Vurgu renkleri */
  --violet-300: #b3a8ff;
  --violet-400: #9b8cff;
  --violet-600: #5a47e0;
  --violet-700: #4836c4;
  --sky-300: #63d2ff;
  --sky-600: #0a7fb3;
  --amber-300: #ffb86b;
  --amber-600: #b35f00;
  --mint-300: #6ee7b7;
  --mint-600: #0f7a55;
  --rose-300: #ff8fa3;
  --rose-600: #c0263f;

  /* Tipografi */
  --font-display: 'Unbounded', 'Schibsted Grotesk', system-ui, sans-serif;
  --font-sans: 'Schibsted Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  /* Tip ölçeği */
  --fs-100: 0.8125rem;
  --fs-200: 0.9375rem;
  --fs-300: 1.0625rem;
  --fs-400: 1.25rem;
  --fs-500: 1.5625rem;
  --fs-600: clamp(1.75rem, 3.4vw, 2.6rem);
  --fs-display: clamp(2.9rem, 8.4vw, 7.6rem);

  /* Boşluk ölçeği (4px tabanlı) */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4.5rem;
  --sp-9: 7rem;

  /* Yarıçap hiyerarşisi: büyük kutu > iç öğe > etiket */
  --radius-xs: 6px;
  --radius-sm: 12px;
  --radius-lg: 28px;
  --radius-pill: 999px;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- 2) SEMANTIC (koyu tema — varsayılan) ---------- */
:root {
  --color-bg: var(--indigo-900);
  --color-tile: var(--indigo-850);
  --color-tile-raised: #262246;
  --color-text: var(--indigo-ink);
  --color-text-muted: var(--indigo-ink-muted);
  --color-rule: var(--indigo-800);
  --color-accent: var(--violet-400);
  --color-accent-strong: var(--violet-300);
  --color-accent-2: var(--sky-300);
  --color-live: var(--amber-300);
  --color-success: var(--mint-300);
  --color-danger: var(--rose-300);
  --color-on-accent: var(--indigo-900);
  --color-focus: var(--sky-300);
  --glow-strength: 0.16;

  --code-bg: #110f24;
  --code-text: var(--indigo-ink);
  --code-muted: var(--indigo-ink-muted);
  --code-key: var(--violet-300);
  --code-string: #a6f0d0;
  --code-number: var(--amber-300);
  color-scheme: dark;
}

/* ---------- 2b) SEMANTIC (açık tema) ---------- */
@media (prefers-color-scheme: light) {
  :root:not([data-theme='dark']) {
    --color-bg: var(--indigo-100);
    --color-tile: #ffffff;
    --color-tile-raised: var(--indigo-50);
    --color-text: var(--indigo-950);
    --color-text-muted: var(--indigo-600);
    --color-rule: var(--indigo-200);
    --color-accent: var(--violet-600);
    --color-accent-strong: var(--violet-700);
    --color-accent-2: var(--sky-600);
    --color-live: var(--amber-600);
    --color-success: var(--mint-600);
    --color-danger: var(--rose-600);
    --color-on-accent: #ffffff;
    --color-focus: var(--violet-600);
    --glow-strength: 0.1;
    color-scheme: light;
  }
}
:root[data-theme='light'] {
  --color-bg: var(--indigo-100);
  --color-tile: #ffffff;
  --color-tile-raised: var(--indigo-50);
  --color-text: var(--indigo-950);
  --color-text-muted: var(--indigo-600);
  --color-rule: var(--indigo-200);
  --color-accent: var(--violet-600);
  --color-accent-strong: var(--violet-700);
  --color-accent-2: var(--sky-600);
  --color-live: var(--amber-600);
  --color-success: var(--mint-600);
  --color-danger: var(--rose-600);
  --color-on-accent: #ffffff;
  --color-focus: var(--violet-600);
  --glow-strength: 0.1;
  color-scheme: light;
}

/* ---------- 3) COMPONENT ---------- */
:root {
  --tile-bg: var(--color-tile);
  --tile-radius: var(--radius-lg);
  --tile-pad: clamp(1.25rem, 2.4vw, 2rem);
  --tile-border: 1px solid var(--color-rule);

  --bento-gap: clamp(0.75rem, 1.4vw, 1rem);
  --bento-row: minmax(9.5rem, auto);

  --btn-radius: var(--radius-pill);
  --btn-pad-y: 0.85rem;
  --btn-pad-x: 1.5rem;
  --btn-primary-bg: var(--color-accent);
  --btn-primary-fg: var(--color-on-accent);

  --chip-bg: var(--color-tile-raised);
  --chip-radius: var(--radius-pill);

  --field-bg: var(--color-bg);
  --field-radius: var(--radius-sm);

  --content-max: 82rem;
  --measure: 64ch;
  --gutter: clamp(0.75rem, 3vw, 2rem);
}