/* =====================================================================
   Ürün Gezgini — Design Tokens  (v2 — premium/custom)
   Brand anchors sampled from logo.jpg:
     Yellow (accent) #FFBE00  ·  Purple (primary) #4B0081
   All text/bg pairs verified for WCAG AA — see docs/design-system.md
   ===================================================================== */
:root {
  /* ---- Brand: Purple (primary / interactive) ---- */
  --primary-50:  #F6F1FB;
  --primary-100: #EADDF6;
  --primary-200: #D6BCEC;
  --primary-300: #B98FDD;
  --primary-400: #9459C8;
  --primary-500: #7331AE;
  --primary-600: #5C1A98;
  --primary-700: #4B0081; /* brand mark */
  --primary-800: #3B0067;
  --primary-900: #2A0049;
  --primary-950: #1A002F;

  /* ---- Brand: Yellow (accent / highlight) ---- */
  --accent-50:  #FFF9E6;
  --accent-100: #FFF0BF;
  --accent-200: #FFE485;
  --accent-300: #FFD64D;
  --accent-400: #FFCA24;
  --accent-500: #FFBE00; /* brand */
  --accent-600: #E7A600;
  --accent-700: #B88400;
  --accent-800: #946A00;
  --accent-900: #7A5700;

  /* ---- Ink (cool slate) — text & structure ---- */
  --ink-950: #0B1120;
  --ink-900: #111827;
  --ink-800: #1E293B;
  --ink-700: #334155;
  --ink-600: #475569;
  --ink-500: #64748B;
  --ink-400: #94A3B8;
  --ink-300: #CBD5E1;
  --ink-200: #E2E8F0;
  --ink-100: #EEF2F7;
  --ink-50:  #F6F8FB;

  /* ---- Paper (warm neutrals) — backgrounds, complements the yellow brand ---- */
  --paper:      #FBFAF7;  /* page background — subtly warm off-white */
  --paper-soft: #F4F2EC;  /* alt section band */
  --surface:    #FFFFFF;  /* cards */
  --surface-2:  #FCFCFB;

  /* ---- Semantic ---- */
  --success-bg:  #E7F6EC;  --success-fg:  #15803D;  --success-solid: #16A34A;
  --warning-bg:  #FEF3E2;  --warning-fg:  #B45309;  --warning-solid: #D97706;
  --error-bg:    #FDECEC;  --error-fg:    #B91C1C;  --error-solid:   #DC2626;
  --info-bg:     #E8F0FE;  --info-fg:     #1D4ED8;  --info-solid:    #2563EB;

  /* ---- "En ucuz" (cheapest) — special emphasis (savings green) ---- */
  --cheapest-fg:    #066B48; /* dark green text (6.5:1 on light) */
  --cheapest-bg:    #E7F7F0;
  --cheapest-solid: #087A52; /* solid button, white text (5.36:1) */
  --cheapest-ring:  #0B8A5F;
  --cheapest-line:  #0B8A5F; /* sparkline / trend */

  /* ---- Aliases used by components ---- */
  --color-bg:        var(--paper);
  --color-surface:   var(--surface);
  --color-text:      var(--ink-800);
  --color-text-soft: var(--ink-600);
  --color-text-mute: var(--ink-500);
  --color-border:    var(--ink-200);
  --color-border-mid:var(--ink-300);
  --color-link:      var(--primary-700);

  /* ---- Gradients / decorative ---- */
  --grad-accent: linear-gradient(135deg, #FFD24D 0%, #FFBE00 55%, #FFAE00 100%);
  --grad-hero:   radial-gradient(1200px 500px at 15% -10%, rgba(255,190,0,.22), transparent 60%),
                 radial-gradient(900px 500px at 100% 0%, rgba(75,0,129,.10), transparent 55%);
  --grad-primary:linear-gradient(135deg, #5C1A98 0%, #4B0081 100%);
  --sheen: linear-gradient(180deg, rgba(255,255,255,.7), rgba(255,255,255,0));

  /* ---- Typography ---- */
  --font-display: "Bricolage Grotesque", "Plus Jakarta Sans", system-ui, sans-serif;
  --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-price:   "Inter", system-ui, sans-serif;

  --fs-xs:   0.75rem;   --fs-sm:   0.8125rem;  --fs-sm2: 0.875rem;
  --fs-base: 1rem;      --fs-md:   1.125rem;   --fs-lg:  1.25rem;
  --fs-xl:   1.5rem;    --fs-2xl:  clamp(1.6rem, 1.2rem + 1.8vw, 2.1rem);
  --fs-3xl:  clamp(2rem, 1.4rem + 3vw, 3.1rem);
  --fs-4xl:  clamp(2.6rem, 1.6rem + 4.4vw, 4rem);

  --lh-tight: 1.08; --lh-snug: 1.28; --lh-base: 1.55;
  --fw-regular:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700; --fw-extra:800;

  /* ---- Spacing (4px base) ---- */
  --space-1: 0.25rem; --space-2: 0.5rem;  --space-3: 0.75rem; --space-4: 1rem;
  --space-5: 1.25rem; --space-6: 1.5rem;  --space-7: 1.75rem; --space-8: 2rem;
  --space-10:2.5rem;  --space-12:3rem;    --space-16:4rem;    --space-20:5rem; --space-24:6rem;

  /* ---- Radius ---- */
  --radius-sm: 8px;  --radius-md: 12px; --radius-lg: 16px;
  --radius-xl: 22px; --radius-2xl: 28px; --radius-pill: 999px;

  /* ---- Shadow (soft, layered; key elements get a purple-tinted lift) ---- */
  --shadow-xs: 0 1px 2px rgba(16,24,40,.05);
  --shadow-sm: 0 1px 3px rgba(16,24,40,.06), 0 1px 2px rgba(16,24,40,.04);
  --shadow-md: 0 6px 16px rgba(16,24,40,.08), 0 2px 6px rgba(16,24,40,.05);
  --shadow-lg: 0 16px 40px rgba(16,24,40,.12), 0 6px 14px rgba(16,24,40,.06);
  --shadow-brand: 0 18px 40px -12px rgba(75,0,129,.35);
  --shadow-accent: 0 16px 34px -12px rgba(255,170,0,.55);
  --shadow-focus: 0 0 0 3px rgba(75,0,129,.30);

  --container: 1180px;
  --header-h: 68px;
  --ease: cubic-bezier(.4,0,.2,1);
  --ease-out: cubic-bezier(.22,1,.36,1);
  --dur-fast: 130ms; --dur: 220ms; --dur-slow: 420ms;
  --z-header: 100; --z-dropdown: 200; --z-tray: 300; --z-modal: 400; --z-toast: 500;
}