:root {
  /* ===== BRAND COLORS ===== */
  --white: #ffffff;
  --black: #1a1a1a;
  --gray-50: #fafafa;
  --gray-100: #f5f5f5;
  --gray-200: #e5e5e5;
  --gray-300: #d4d4d4;
  --gray-400: #a3a3a3;
  --gray-500: #737373;
  --gray-600: #525252;
  --gray-700: #404040;
  --gray-800: #262626;
  --gray-900: #171717;

  /* İş Kiti — Brand Chartreuse Green */
  --is-50: #fafde8;
  --is-100: #f2f8c4;
  --is-200: #e3ef8a;
  --is-300: #d0e14e;
  --is-400: #c2d136;
  --is-500: #a8b92a;
  --is-600: #839220;
  --is-700: #636e19;
  --is-800: #4a5214;
  --is-900: #30350d;

  /* Sevgili Kiti — Red */
  --sev-50: #fef2f1;
  --sev-100: #fde3e1;
  --sev-200: #f7c1c1;
  --sev-300: #f09595;
  --sev-400: #e56464;
  --sev-500: #e24b4a;
  --sev-600: #c33a39;
  --sev-700: #a32d2d;
  --sev-800: #791f1f;
  --sev-900: #501313;

  /* Aksan — Orange (CTA, vurgu) */
  --accent-50: #fff5ee;
  --accent-100: #ffe0cc;
  --accent-200: #f5c4b3;
  --accent-300: #f0997b;
  --accent-400: #e8652e;
  --accent-500: #d4561f;
  --accent-600: #b84818;
  --accent-700: #993c1d;
  --accent-800: #712b13;
  --accent-900: #4a1b0c;

  /* ===== TYPOGRAPHY ===== */
  --font-primary: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --text-xs: 0.75rem;    /* 12px */
  --text-sm: 0.8125rem;  /* 13px */
  --text-base: 0.875rem; /* 14px */
  --text-md: 1rem;       /* 16px */
  --text-lg: 1.25rem;    /* 20px */
  --text-xl: 1.5rem;     /* 24px */
  --text-2xl: 2rem;      /* 32px */
  --text-3xl: 2.5rem;    /* 40px */
  --text-4xl: 3.5rem;    /* 56px */

  /* ===== SPACING ===== */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  --space-4xl: 6rem;

  /* ===== RADIUS ===== */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  /* ===== SHADOWS ===== */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
  --shadow-lg: 0 12px 32px rgba(0,0,0,0.12);

  /* ===== TRANSITIONS ===== */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 150ms;
  --dur-base: 300ms;
  --dur-slow: 500ms;

  /* ===== LAYOUT ===== */
  --max-width: 1200px;
  --gutter: 1rem;
}

@media (min-width: 768px) {
  :root {
    --gutter: 2rem;
  }
}

@media (min-width: 1024px) {
  :root {
    --gutter: 3rem;
  }
}