/* ==========================================================================
   Eczane Depo — Design Tokens
   Kaynak: Figma "UI Kit" / ColorTokensSection (node 1:8299)
   Bu dosya elle degil, tasarim degistiginde Figma'dan yeniden turetilir.
   ========================================================================== */

:root {
  /* ---------- Renk paleti ---------- */
  --color-charcoal: #111111;       /* Header / Primary Text */
  --color-dark-text: #2a2a2a;      /* Body Text */
  --color-secondary: #6e6e6e;      /* Secondary Text */
  --color-passive: #a9a29a;        /* Placeholder / Disabled */
  --color-white: #ffffff;          /* Background */

  --color-cream-1: #fbf8f3;        /* Page Background */
  --color-cream-2: #f7f3ed;        /* Section Alt BG */
  --color-cream-3: #efe9e0;        /* Disabled BG */
  --color-cream-page: #f8f5f2;     /* Sayfa frame'lerinin acik krem bolum zemini (tum sayfalarda geciyor) */

  --color-gold: #b8925a;           /* Primary Accent */
  --color-gold-dark: #9c7a45;      /* Gold Hover */
  --color-gold-light: #efe2ce;     /* Gold Background */
  --color-gold-page: #a98a47;      /* Sayfa frame'lerindeki accent (header rozet, premium serit) */

  --color-green: #1f7a54;          /* Add to Cart */
  --color-green-dark: #17603f;     /* Cart Hover */
  --color-whatsapp: #25d366;       /* WhatsApp Icon */
  --color-whatsapp-btn: #01c754;   /* Sayfalardaki WhatsApp CTA butonu */
  --color-commerce: #10b981;       /* Sepete Ekle / indirim vurgusu (sayfa frame'leri) */

  --color-star-filled: #c9a24b;    /* Star Active */
  --color-star-empty: #d9d3c8;     /* Star Inactive */

  --color-border: #e6dfd4;         /* Thin Border */
  --color-warning: #c0492f;        /* Discount / Alert */
  --color-out-of-stock: #9a9a9a;   /* Disabled Label */

  /* ---------- Semantik takma adlar ---------- */
  --color-text: var(--color-dark-text);
  --color-heading: var(--color-charcoal);
  --color-text-muted: var(--color-secondary);
  --color-bg: var(--color-cream-1);
  --color-bg-alt: var(--color-cream-2);
  --color-surface: var(--color-white);
  --color-accent: var(--color-gold);
  --color-accent-hover: var(--color-gold-dark);

  /* ---------- Tipografi aileleri ---------- */
  --font-display: "Noto Serif Display", "Noto Serif", Georgia, serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  /* Sayfa frame'leri (Home vb.) nav/UI metinlerinde Jost kullaniyor —
     UI Kit'te yok ama tasarimin gercek hali bu. */
  --font-ui: "Jost", "Inter", system-ui, sans-serif;

  /* ---------- Tipografi olcekleri ----------
     UI Kit "Typography Scale" blogundan birebir alindi. */

  /* Headline / Accent — Noto Serif Display 32px */
  --text-headline-size: 32px;
  --text-headline-line: 32px;
  --text-headline-tracking: 1.92px;
  --text-headline-weight: 500;

  /* Subheading — Noto Serif Display 22px, Italic */
  --text-subheading-size: 22px;
  --text-subheading-line: 22px;
  --text-subheading-tracking: 1.1px;
  --text-subheading-weight: 400;

  /* Button / UI Label — Inter 14px, Medium */
  --text-label-size: 14px;
  --text-label-line: 21px;
  --text-label-tracking: 0.56px;
  --text-label-weight: 500;

  /* Body Copy — Inter 13px, Regular */
  --text-body-size: 13px;
  --text-body-line: 21.45px;
  --text-body-tracking: 0px;
  --text-body-weight: 400;

  /* Micro Label — Inter 10px, Semibold, Uppercase */
  --text-micro-size: 10px;
  --text-micro-line: 15px;
  --text-micro-tracking: 1.6px;
  --text-micro-weight: 600;

  /* ---------- Spacing olcegi ----------
     UI Kit "Spacing Scale — 4 · 8 · 12 · 16 · 24 · 32 · 48 · 64 px" */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

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

  /* ---------- Layout ---------- */
  --container-max: 1161px;   /* Home Page ic container genisligi */
  --page-gutter: 139.5px;    /* 1440px frame'de yan bosluk */
  --border-thin: 1px solid var(--color-border);
}