/* ==========================================================================
   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);
}