/* ==========================================================================
   CSS Custom Properties — Selamettin İlker Girgin
   ========================================================================== */

:root {
  /* ── Colors ─────────────────────────────────────────────────────────────── */
  --color-bg:            #FAFAF9;
  --color-bg-alt:        #F1F5F9;
  --color-bg-card:       #FFFFFF;
  --color-text:          #0F172A;
  --color-text-secondary:#334155;
  --color-text-muted:    #64748B;
  --color-border:        #CBD5E1;
  --color-border-light:  #E2E8F0;

  --color-accent:        #2563EB;
  --color-accent-hover:  #1D4ED8;
  --color-accent-light:  #EFF6FF;
  --color-accent-2:      #059669;
  --color-accent-2-hover:#047857;

  --color-success:       #16A34A;
  --color-warning:       #D97706;
  --color-error:         #DC2626;

  --color-hero-bg:       #111827;
  --color-hero-text:     #F9FAFB;
  --color-hero-muted:    #D1D5DB;

  --color-footer-bg:     #1C1917;
  --color-footer-text:   #D6D3D1;

  /* ── Typography ─────────────────────────────────────────────────────────── */
  --font-family:         'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI',
                         Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  --font-mono:           'JetBrains Mono', 'Fira Code', 'Consolas', monospace;

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

  --lh-tight:   1.2;
  --lh-snug:    1.35;
  --lh-normal:  1.6;
  --lh-relaxed: 1.75;

  --fw-normal:  400;
  --fw-medium:  500;
  --fw-semibold:600;
  --fw-bold:    700;

  --ls-tight:  -0.02em;
  --ls-normal:  0;
  --ls-wide:    0.025em;
  --ls-wider:   0.05em;

  /* ── Spacing ────────────────────────────────────────────────────────────── */
  --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-16:  4rem;      /* 64px */
  --space-20:  5rem;      /* 80px */
  --space-24:  6rem;      /* 96px */
  --space-32:  8rem;      /* 128px */

  /* ── Layout ─────────────────────────────────────────────────────────────── */
  --container-max:     1200px;
  --container-narrow:  800px;
  --container-wide:    1400px;
  --container-padding: var(--space-6);

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

  /* ── Shadows ────────────────────────────────────────────────────────────── */
  --shadow-sm:   0 1px 2px rgba(0,0,0,0.05);
  --shadow-md:   0 4px 6px -1px rgba(0,0,0,0.07), 0 2px 4px -2px rgba(0,0,0,0.05);
  --shadow-lg:   0 10px 15px -3px rgba(0,0,0,0.08), 0 4px 6px -4px rgba(0,0,0,0.04);
  --shadow-xl:   0 20px 25px -5px rgba(0,0,0,0.08), 0 8px 10px -6px rgba(0,0,0,0.04);

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

  /* ── Z-Index ────────────────────────────────────────────────────────────── */
  --z-header:    100;
  --z-overlay:   200;
  --z-modal:     300;
  --z-tooltip:   400;
}

/* ── Responsive container padding ──────────────────────────────────────── */
@media (min-width: 768px) {
  :root {
    --container-padding: var(--space-8);
  }
}
@media (min-width: 1024px) {
  :root {
    --container-padding: var(--space-10);
  }
}