:root {
  /* Color */
  --kg-color-ink: #111111;
  --kg-color-text: #262624;
  --kg-color-muted: #6d6d68;
  --kg-color-subtle: #999993;
  --kg-color-line: #deddd7;
  --kg-color-line-soft: #ecebe6;
  --kg-color-surface: #ffffff;
  --kg-color-surface-soft: #f5f4f1;
  --kg-color-header: #f7f6f2;
  --kg-color-inverse: #ffffff;
  --kg-color-danger: #c72a2a;
  --kg-color-success: #1f7a4c;

  /* Typography — font dosyaları ayrı migration işidir; tema sistem fallback ile çalışır. */
  --kg-font-sans: Inter, "KG Sans Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --kg-font-display: var(--kg-font-sans);
  --kg-font-size-xs: 0.6875rem;
  --kg-font-size-sm: 0.8125rem;
  --kg-font-size-md: 1rem;
  --kg-font-size-lg: clamp(1.125rem, 1vw + .85rem, 1.375rem);
  --kg-font-size-h3: clamp(1.5rem, 2vw, 2rem);
  --kg-font-size-h2: clamp(2rem, 3.6vw, 3.6rem);
  --kg-font-size-h1: clamp(2.625rem, 6vw, 5.75rem);
  --kg-leading-tight: 1.03;
  --kg-leading-body: 1.55;
  --kg-tracking-label: .085em;

  /* Spacing: 4px tabanı */
  --kg-space-1: 4px;
  --kg-space-2: 8px;
  --kg-space-3: 12px;
  --kg-space-4: 16px;
  --kg-space-5: 20px;
  --kg-space-6: 24px;
  --kg-space-8: 32px;
  --kg-space-10: 40px;
  --kg-space-12: 48px;
  --kg-space-16: 64px;
  --kg-space-20: 80px;
  --kg-space-24: 96px;
  --kg-space-32: 128px;

  /* Layout */
  --kg-container: 1600px;
  --kg-container-reading: 820px;
  --kg-gutter: clamp(18px, 3vw, 54px);
  --kg-section-space: clamp(56px, 8vw, 112px);
  --kg-product-ratio: 3 / 4;

  /* Shape */
  --kg-radius-none: 0;
  --kg-radius-sm: 4px;
  --kg-radius-md: 10px;
  --kg-radius-pill: 999px;

  /* Motion */
  --kg-ease: cubic-bezier(.22,.61,.36,1);
  --kg-duration-fast: 160ms;
  --kg-duration: 240ms;
  --kg-duration-slow: 360ms;

  /* Header contract */
  --kg-header-main-h: 82px;
  --kg-nav-h: 44px;

  /* Layering */
  --kg-z-header: 900;
  --kg-z-backdrop: 850;
  --kg-z-overlay: 1200;
  --kg-z-drawer: 1250;
}

@media (max-width: 1024px) {
  :root { --kg-header-main-h: 64px; }
}

@media (max-width: 640px) {
  :root {
    --kg-gutter: 16px;
    --kg-header-main-h: 60px;
    --kg-section-space: 56px;
  }
}

/* 0.2/0.3 prototype compatibility aliases — remove after visual pass. */
:root {
  --kg-bg: var(--kg-color-surface-soft);
  --kg-surface: var(--kg-color-surface);
  --kg-header-bg: var(--kg-color-header);
  --kg-text: var(--kg-color-ink);
  --kg-muted: var(--kg-color-muted);
  --kg-line: var(--kg-color-line);
  --kg-max: var(--kg-container);
}

/* ======================================================================
   0.9.1 — Kılınç Gümüş brand-system semantic tokens
   These aliases are the single visual contract for theme + custom plugins.
   ====================================================================== */
:root {
  /* Controls */
  --kg-control-h: 48px;
  --kg-control-h-lg: 52px;
  --kg-control-radius: 0px;
  --kg-action-h: 48px;
  --kg-action-h-lg: 52px;
  --kg-action-radius: 0px;
  --kg-icon-control: 44px;

  /* Semantic shapes */
  --kg-card-radius: 12px;
  --kg-panel-radius: 12px;
  --kg-chip-radius: 999px;

  /* Surfaces / depth */
  --kg-color-surface-warm: #fbfaf8;
  --kg-shadow-card: 0 8px 28px rgba(17, 17, 17, .04);
  --kg-shadow-overlay: 0 18px 48px rgba(17, 17, 17, .12);
  --kg-focus-ring: 0 0 0 2px rgba(17, 17, 17, .08);

  /* Loading */
  --kg-spinner-size: 32px;
  --kg-spinner-track: #ecebe6;
  --kg-spinner-head: #111111;
  --kg-spinner-duration: 750ms;
  --kg-skeleton-duration: 1.35s;
}