/* =========================================================
   Bilet Baba — Design Tokens
   ========================================================= */

:root {
  /* === Brand Palette (Cherry Red) === */
  --primary:        #DC2626;
  --primary-dark:   #991B1B;
  --primary-darker: #7F1D1D;
  --primary-50:     #FEF2F2;
  --primary-100:    #FEE2E2;
  --primary-200:    #FECACA;
  --primary-300:    #FCA5A5;
  --primary-400:    #F87171;
  --primary-500:    #EF4444;
  --primary-600:    #DC2626;
  --primary-700:    #B91C1C;
  --primary-800:    #991B1B;
  --primary-900:    #7F1D1D;

  /* === Accent (Indigo Blue — secondary CTA, links) === */
  --accent:         #1E40AF;
  --accent-light:   #3B82F6;
  --accent-50:      #EFF6FF;

  /* === Semantic === */
  --success:        #16A34A;
  --success-bg:     #DCFCE7;
  --warning:        #F59E0B;
  --warning-bg:     #FEF3C7;
  --danger:         #DC2626;
  --info:           #0EA5E9;

  /* === Neutrals === */
  --black:          #000000;
  --white:          #FFFFFF;
  --dark:           #0F172A;
  --dark-2:         #1F2937;
  --gray-900:       #111827;
  --gray-800:       #1F2937;
  --gray-700:       #374151;
  --gray-600:       #4B5563;
  --gray-500:       #6B7280;
  --gray-400:       #9CA3AF;
  --gray-300:       #D1D5DB;
  --gray-200:       #E5E7EB;
  --gray-100:       #F3F4F6;
  --gray-50:        #F9FAFB;

  /* === Surfaces === */
  --bg:             #FFFFFF;
  --bg-soft:        #F9FAFB;
  --bg-muted:       #F3F4F6;
  --border:         #E5E7EB;
  --border-strong:  #D1D5DB;

  /* === Gradients === */
  --gradient-primary: linear-gradient(135deg, #DC2626 0%, #991B1B 100%);
  --gradient-soft:    linear-gradient(180deg, #FEF2F2 0%, #FFFFFF 100%);
  --gradient-hero:    radial-gradient(ellipse 1200px 600px at 50% 0%, rgba(220, 38, 38, .12) 0%, transparent 70%);
  --gradient-cta:     linear-gradient(135deg, #DC2626 0%, #B91C1C 50%, #7F1D1D 100%);

  /* === Typography === */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, "SF Mono", Menlo, monospace;

  /* Type scale */
  --fs-xs:    12px;
  --fs-sm:    13px;
  --fs-base:  15px;
  --fs-md:    16px;
  --fs-lg:    18px;
  --fs-xl:    20px;
  --fs-2xl:   24px;
  --fs-3xl:   30px;
  --fs-4xl:   36px;
  --fs-5xl:   48px;
  --fs-6xl:   60px;
  --fs-7xl:   72px;

  --lh-tight:  1.1;
  --lh-snug:   1.3;
  --lh-normal: 1.5;
  --lh-relaxed: 1.7;

  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-extra:    800;

  /* === Spacing (4px base) === */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-7:  28px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-14: 56px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;
  --sp-32: 128px;

  /* === Radius === */
  --r-xs:   4px;
  --r-sm:   8px;
  --r-md:   12px;
  --r-lg:   16px;
  --r-xl:   20px;
  --r-2xl:  24px;
  --r-3xl:  32px;
  --r-full: 9999px;

  /* === Shadows (premium feel) === */
  --shadow-xs:  0 1px 2px rgba(15, 23, 42, .05);
  --shadow-sm:  0 1px 3px rgba(15, 23, 42, .08), 0 1px 2px rgba(15, 23, 42, .04);
  --shadow-md:  0 4px 12px rgba(15, 23, 42, .08), 0 2px 4px rgba(15, 23, 42, .04);
  --shadow-lg:  0 10px 24px rgba(15, 23, 42, .10), 0 4px 8px rgba(15, 23, 42, .04);
  --shadow-xl:  0 20px 48px rgba(15, 23, 42, .14), 0 8px 16px rgba(15, 23, 42, .06);
  --shadow-2xl: 0 32px 64px rgba(15, 23, 42, .18), 0 12px 24px rgba(15, 23, 42, .08);

  --shadow-primary:  0 8px 24px rgba(220, 38, 38, .35);
  --shadow-primary-soft: 0 4px 16px rgba(220, 38, 38, .18);

  /* === Transitions === */
  --tx-fast:   150ms cubic-bezier(.4, 0, .2, 1);
  --tx-base:   220ms cubic-bezier(.4, 0, .2, 1);
  --tx-slow:   340ms cubic-bezier(.4, 0, .2, 1);
  --tx-bounce: 500ms cubic-bezier(.68, -.55, .27, 1.55);

  /* === Z-Index Map === */
  --z-base:     1;
  --z-sticky:   10;
  --z-dropdown: 100;
  --z-overlay:  900;
  --z-modal:    1000;
  --z-toast:    1100;
  --z-tooltip:  1200;

  /* === Layout === */
  --container-max: 1240px;
  --container-pad: 24px;
  --navbar-h:      72px;

  /* === Breakpoints (referans, JS için) === */
  --bp-sm:  640px;
  --bp-md:  768px;
  --bp-lg:  1024px;
  --bp-xl:  1280px;
}