@import url('https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css');
/* ============================================================
   variables.css — Trendyol benzeri Fresh/Light Design Tokens
   toptantisortbaski.com
   ============================================================ */

:root {
  /* === BRAND === */
  --primary:        #F27A1A;   /* Trendyol turuncu */
  --primary-dark:   #D4690E;
  --primary-light:  #FF9544;
  --primary-bg:     #FFF8F2;
  --primary-10:     rgba(242,122,26,0.10);
  --primary-20:     rgba(242,122,26,0.20);

  /* === NEUTRALS — Light, clean === */
  --black:          #1D1D1F;   /* Apple benzeri yumuşak siyah */
  --dark:           #2C2C2E;
  --gray-900:       #3A3A3C;
  --gray-800:       #48484A;
  --gray-700:       #636366;
  --gray-600:       #8E8E93;
  --gray-500:       #AEAEB2;
  --gray-400:       #C7C7CC;
  --gray-300:       #D1D1D6;
  --gray-200:       #E5E5EA;
  --gray-100:       #F2F2F7;
  --gray-50:        #F9F9FB;
  --white:          #FFFFFF;

  /* === SEMANTIC === */
  --success:        #30D158;
  --success-bg:     #F0FFF4;
  --warning:        #FF9F0A;
  --warning-bg:     #FFFBF0;
  --error:          #FF3B30;
  --error-bg:       #FFF5F5;
  --info:           #0A84FF;
  --info-bg:        #F0F8FF;

  /* === TYPOGRAPHY === */
  --font-heading: 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, sans-serif;

  --text-xs:   0.6875rem;
  --text-sm:   0.8125rem;
  --text-base: 0.9375rem;
  --text-md:   1rem;
  --text-lg:   clamp(1rem, 0.92rem + 0.35vw, 1.125rem);
  --text-xl:   clamp(1.125rem, 1rem + 0.45vw, 1.25rem);
  --text-2xl:  clamp(1.375rem, 1.12rem + 0.9vw, 1.5rem);
  --text-3xl:  clamp(1.75rem, 1.35rem + 1.35vw, 1.875rem);
  --text-4xl:  clamp(2.125rem, 1.6rem + 1.8vw, 2.25rem);
  --text-5xl:  clamp(2.5rem, 2rem + 2.5vw, 3rem);

  --leading-tight:   1.15;
  --leading-snug:    1.35;
  --leading-normal:  1.6;
  --leading-relaxed: 1.8;

  --tracking-tight:   -0.03em;
  --tracking-snug:    -0.02em;
  --tracking-normal:   0;
  --tracking-wide:     0.04em;
  --tracking-wider:    0.08em;
  --tracking-widest:   0.15em;

  /* === SPACING === */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  clamp(1rem, 0.88rem + 0.35vw, 1.25rem);
  --sp-6:  clamp(1.125rem, 0.98rem + 0.45vw, 1.5rem);
  --sp-8:  clamp(1.5rem, 1.2rem + 0.9vw, 2rem);
  --sp-10: clamp(1.75rem, 1.35rem + 1.2vw, 2.5rem);
  --sp-12: clamp(2.25rem, 1.9rem + 1.35vw, 3rem);
  --sp-16: clamp(3rem, 2.4rem + 2vw, 4rem);
  --sp-20: clamp(4rem, 3rem + 2.5vw, 5rem);
  --sp-24: clamp(4.5rem, 3.5rem + 3vw, 6rem);
  --sp-32: clamp(6rem, 4.5rem + 4vw, 8rem);

  /* === RADIUS === */
  --r-xs:   2px; --r-sm:  6px; --r-md:  10px; --r-lg:  14px;
  --r-xl:   18px; --r-2xl: 24px; --r-full: 9999px;

  /* === SHADOWS — softer, Trendyol-like === */
  --shadow-xs:  0 1px 3px rgba(0,0,0,0.04);
  --shadow-sm:  0 2px 6px rgba(0,0,0,0.06);
  --shadow-md:  0 4px 16px rgba(0,0,0,0.08);
  --shadow-lg:  0 8px 30px rgba(0,0,0,0.10);
  --shadow-xl:  0 16px 48px rgba(0,0,0,0.12);
  --shadow-2xl: 0 32px 80px rgba(0,0,0,0.16);
  --shadow-brand: 0 6px 20px rgba(242,122,26,0.30);

  /* === BORDERS === */
  --border-width: 1px;
  --border-color: #EAEAEF;
  --border: var(--border-width) solid var(--border-color);

  /* === TRANSITIONS === */
  --ease:        0.18s ease;
  --ease-slow:   0.30s ease;
  --ease-spring: 0.4s cubic-bezier(0.34,1.56,0.64,1);

  /* === LAYOUT === */
  --container-max: 90rem;
  --container-pad: clamp(1rem, 0.7rem + 1.2vw, 1.5rem);

  /* === COMPONENT HEIGHTS === */
  --topbar-height:  2.375rem;
  --header-height:  clamp(3.5rem, 3.15rem + 0.9vw, 4.125rem);
  --nav-height:     3rem;

  /* === Z-INDEX === */
  --z-dropdown: 200;
  --z-sticky:   300;
  --z-overlay:  800;
  --z-drawer:   900;
  --z-modal:    1000;
  --z-toast:    1100;

  /* === TRANSITIONS === */
    --transition:      0.2s ease;
    --transition-slow: 0.4s ease;

    /* === LEGACY ALIASES === */
    --secondary:     #6C757D;
    --cream:         #FFFDF9;
    --container:     1280px;
    --topbar-h:      36px;

    /* --radius-* aliases */
    --radius-sm:     var(--r-sm);
    --radius-md:     var(--r-md);
    --radius-lg:     var(--r-lg);
    --radius-xl:     var(--r-xl);
    --radius-full:   var(--r-full);

    /* --space-* aliases */
    --space-lg:      var(--sp-6);
    --space-2xl:     var(--sp-10);
    --space-3xl:     var(--sp-12);
    --space-4xl:     var(--sp-16);
}