/* ============================================================
   DESIGN TOKENS — Çekmeköy Plise Perde
   Tüm değerler buradan yönetilir. Hiçbir yerde magic number yok.
   ============================================================ */

:root {
  /* ── Brand Colors ── */
  --color-brand-primary:       #83bd81;
  --color-brand-primary-dark:  #6aaa68;
  --color-brand-primary-light: #a8d4a6;
  --color-brand-primary-muted: #e8f5e8;
  --color-brand-secondary:     #404e5e;
  --color-brand-secondary-dark:#2d3844;
  --color-brand-secondary-light:#5a6b7d;

  /* ── Neutrals ── */
  --color-white:      #ffffff;
  --color-gray-50:    #f9fafb;
  --color-gray-100:   #f3f4f6;
  --color-gray-200:   #e5e7eb;
  --color-gray-300:   #d1d5db;
  --color-gray-400:   #9ca3af;
  --color-gray-500:   #6b7280;
  --color-gray-600:   #4b5563;
  --color-gray-700:   #374151;
  --color-gray-800:   #1f2937;
  --color-gray-900:   #111827;

  /* ── Semantic Colors ── */
  --color-text-primary:    var(--color-gray-900);
  --color-text-secondary:  var(--color-gray-600);
  --color-text-muted:      var(--color-gray-400);
  --color-text-inverse:    var(--color-white);
  --color-bg-page:         var(--color-white);
  --color-bg-subtle:       var(--color-gray-50);
  --color-bg-section-alt:  #f0f7f0;
  --color-border:          var(--color-gray-200);
  --color-border-strong:   var(--color-gray-300);

  /* ── Typography Scale ── */
  --font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                      Helvetica, Arial, sans-serif, "Apple Color Emoji";
  --font-family-mono: ui-monospace, "SF Mono", Menlo, Monaco, "Cascadia Code",
                      "Roboto Mono", monospace;

  --font-size-xs:   0.75rem;   /* 12px */
  --font-size-sm:   0.875rem;  /* 14px */
  --font-size-base: 1rem;      /* 16px */
  --font-size-md:   1.125rem;  /* 18px */
  --font-size-lg:   1.25rem;   /* 20px */
  --font-size-xl:   1.5rem;    /* 24px */
  --font-size-2xl:  1.875rem;  /* 30px */
  --font-size-3xl:  2.25rem;   /* 36px */
  --font-size-4xl:  3rem;      /* 48px */
  --font-size-5xl:  3.75rem;   /* 60px */

  --font-weight-normal:    400;
  --font-weight-medium:    500;
  --font-weight-semibold:  600;
  --font-weight-bold:      700;
  --font-weight-extrabold: 800;

  --line-height-tight:   1.2;
  --line-height-snug:    1.375;
  --line-height-normal:  1.5;
  --line-height-relaxed: 1.625;
  --line-height-loose:   1.75;

  --letter-spacing-tight:  -0.025em;
  --letter-spacing-normal:  0em;
  --letter-spacing-wide:    0.025em;
  --letter-spacing-wider:   0.05em;
  --letter-spacing-widest:  0.1em;

  /* ── Spacing Scale (8px base) ── */
  --space-0:   0;
  --space-1:   0.25rem;   /* 4px  */
  --space-2:   0.5rem;    /* 8px  */
  --space-3:   0.75rem;   /* 12px */
  --space-4:   1rem;      /* 16px */
  --space-5:   1.25rem;   /* 20px */
  --space-6:   1.5rem;    /* 24px */
  --space-8:   2rem;      /* 32px */
  --space-10:  2.5rem;    /* 40px */
  --space-12:  3rem;      /* 48px */
  --space-14:  3.5rem;    /* 56px */
  --space-16:  4rem;      /* 64px */
  --space-20:  5rem;      /* 80px */
  --space-24:  6rem;      /* 96px */
  --space-32:  8rem;      /* 128px */

  /* ── Section Spacing ── */
  --section-py:        var(--space-20);
  --section-py-lg:     var(--space-24);
  --section-py-sm:     var(--space-12);
  --section-gap:       var(--space-16);

  /* ── Container ── */
  --container-max:     1280px;
  --container-px:      var(--space-6);
  --container-px-md:   var(--space-8);
  --container-px-lg:   var(--space-10);

  /* ── Border Radius ── */
  --radius-sm:   0.25rem;
  --radius-md:   0.5rem;
  --radius-lg:   0.75rem;
  --radius-xl:   1rem;
  --radius-2xl:  1.5rem;
  --radius-full: 9999px;

  /* ── Shadows ── */
  --shadow-xs:  0 1px 2px 0 rgba(0,0,0,.05);
  --shadow-sm:  0 1px 3px 0 rgba(0,0,0,.10), 0 1px 2px -1px rgba(0,0,0,.06);
  --shadow-md:  0 4px 6px -1px rgba(0,0,0,.10), 0 2px 4px -2px rgba(0,0,0,.06);
  --shadow-lg:  0 10px 15px -3px rgba(0,0,0,.10), 0 4px 6px -4px rgba(0,0,0,.05);
  --shadow-xl:  0 20px 25px -5px rgba(0,0,0,.10), 0 8px 10px -6px rgba(0,0,0,.05);
  --shadow-brand: 0 4px 20px 0 rgba(131,189,129,.35);

  /* ── Transitions ── */
  --transition-fast:   150ms ease;
  --transition-base:   250ms ease;
  --transition-slow:   400ms ease;

  /* ── Z-Index ── */
  --z-sticky: 100;
  --z-modal:  200;
  --z-toast:  300;
}

/* ── Responsive Overrides ── */
@media (max-width: 768px) {
  :root {
    --section-py:     var(--space-12);
    --section-py-lg:  var(--space-16);
    --section-py-sm:  var(--space-8);
    --font-size-4xl:  2.25rem;
    --font-size-5xl:  2.75rem;
    --container-px:   var(--space-4);
  }
}
@media (max-width: 480px) {
  :root {
    --section-py:    var(--space-10);
    --font-size-3xl: 1.875rem;
    --font-size-4xl: 2rem;
  }
}