/* ============================================================
   BİSİKLETROTAM — Design Tokens  v3.2
   Açık, nefes alan, beyaz tabanlı yüzeyler
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;600;700;900&family=Nunito:wght@400;500;600;700&display=swap');

:root {
  --clr-primary-50:  #f0fdf4;
  --clr-primary-100: #dcfce7;
  --clr-primary-200: #bbf7d0;
  --clr-primary-400: #4ade80;
  --clr-primary-600: #16a34a;
  --clr-primary-700: #15803d;
  --clr-primary-800: #166534;
  --clr-primary-900: #142f53;

  --clr-amber-50:  #fffbeb;
  --clr-amber-100: #fef3c7;
  --clr-amber-400: #fbbf24;
  --clr-amber-600: #d97706;
  --clr-amber-800: #92400e;

  --clr-error-50:  #fef2f2;
  --clr-error-600: #dc2626;

  /* Yüzeyler — BEYAZ TABANLI */
  --surface:                  #f8f9fa;
  --surface-bright:           #ffffff;
  --surface-container-lowest: #ffffff;
  --surface-container-low:    #f8f9fa;
  --surface-container:        #f1f3f5;
  --surface-container-high:   #e9ecef;
  --surface-container-highest:#dee2e6;
  --surface-dim:              #ced4da;
  --surface-variant:          #f1f3f5;

  --on-surface:               #1a1a2e;
  --on-surface-variant:       #495057;
  --outline:                  #868e96;
  --outline-variant:          #dee2e6;

  --primary:             var(--clr-primary-700);
  --on-primary:          #ffffff;
  --primary-container:   var(--clr-primary-600);
  --on-primary-container:var(--clr-primary-100);
  --primary-fixed:       var(--clr-primary-50);

  --secondary:             var(--clr-amber-600);
  --on-secondary:          #ffffff;
  --secondary-container:   var(--clr-amber-50);
  --on-secondary-container:var(--clr-amber-800);

  --error:           var(--clr-error-600);
  --error-container: var(--clr-error-50);

  --background:    #f8f9fa;
  --on-background: #1a1a2e;

  --font-display: 'Outfit', system-ui, sans-serif;
  --font-body:    'Nunito', system-ui, sans-serif;

  --text-xs:   0.6875rem;
  --text-sm:   0.75rem;
  --text-base: 0.875rem;
  --text-md:   1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.375rem;
  --text-2xl:  1.75rem;
  --text-3xl:  2.25rem;
  --text-4xl:  3rem;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;

  --radius-sm:   0.5rem;
  --radius-md:   0.75rem;
  --radius-lg:   1rem;
  --radius-xl:   1.5rem;
  --radius-2xl:  2rem;
  --radius-full: 9999px;

  --shadow-xs: 0 1px 3px rgba(0,0,0,0.04);
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.08);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.10);

  --z-dropdown: 20;
  --z-sticky:   30;
  --z-overlay:  40;
  --z-modal:    50;
  --z-toast:    60;

  --ease-out:    cubic-bezier(0.0, 0.0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast:   150ms;
  --duration-normal: 250ms;
  --duration-slow:   400ms;

  --header-h: 64px;
  --nav-h:    72px;
}

[data-theme="dark"] {
  --surface:                  #111827;
  --surface-bright:           #1f2937;
  --surface-container-lowest: #0f172a;
  --surface-container-low:    #1e293b;
  --surface-container:        #1e293b;
  --surface-container-high:   #334155;
  --surface-container-highest:#475569;
  --surface-dim:              #0f172a;
  --surface-variant:          #1e293b;

  --on-surface:               #f1f5f9;
  --on-surface-variant:       #94a3b8;
  --outline:                  #64748b;
  --outline-variant:          #334155;

  --primary:             var(--clr-primary-400);
  --on-primary:          var(--clr-primary-900);
  --primary-container:   var(--clr-primary-800);
  --on-primary-container:var(--clr-primary-100);
  --primary-fixed:       rgba(74,222,128,0.12);

  --secondary:             var(--clr-amber-400);
  --on-secondary:          var(--clr-amber-800);
  --secondary-container:   rgba(217,119,6,0.15);
  --on-secondary-container:var(--clr-amber-100);

  --background:    #0f172a;
  --on-background: #f1f5f9;

  --shadow-xs: 0 1px 4px rgba(0,0,0,0.4);
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.4);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.5);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.6);
}