/**
 * variables.css
 * Peptiline tasarım token'ları — Figma "2026 Peptiline Website" dosyasından çıkarıldı.
 * Renk/ölçü değerleri doğrudan Figma değişkenlerine karşılık gelir.
 */

:root {
  /* --- Marka renkleri --- */
  --color-brand: #0f3253;           /* Ana lacivert */
  --color-brand-dark: #0a2540;      /* Hover/koyu varyant */
  --color-brand-tint: #d3e6ff;      /* Açık mavi (gradient üst) */

  /* --- Nötr --- */
  --color-bg: #ffffff;
  --color-bg-muted: #f8f8f8;        /* Kart / bölüm arka planı */
  --color-bg-hero: #77767e;         /* Ana sayfa hero gri katmanı */
  --color-panel: #ecf7ff;           /* Adım paneli / filigran açık mavisi */
  --color-text-meta: #77767e;       /* Besin değeri notları gibi ikincil metin */
  --color-border: #d9d9d9;
  --color-text: #1e1e1e;
  --color-text-muted: #b3b3b3;      /* Placeholder / tersiyer */
  --color-text-on-brand: #ffffff;

  /* --- Durum --- */
  --color-error: #c8322b;
  --color-success: #2f7b4a;

  /* --- Ürün renkleri (her ürünün kendi kimliği) --- */
  --color-colamerim: #f08236;
  --color-colamerim-alt: #db511a;   /* kart başlığı / rozet (Figma 13:371) */
  --color-peptage: #317f85;
  --color-peptage-alt: #2f7b80;
  --color-stacalm: #378d55;
  --color-stacalm-alt: #317948;
  --color-memoran: #9f50a7;
  --color-memoran-alt: #9a4aa2;

  /* --- Tipografi --- */
  /* Exo: yerelde sunulan variable font (css/fonts.css, 100..900 + italic); menü, başlık ve
     gövdede tek aile kullanılır. Latin-ext subset'i içerdiği için ş/ğ/İ sorunsuz çizilir.
     Müşteri kararı (16 Eyl 2026): Delm yerine menüde Exo Regular. */
  --font-display: 'Exo', system-ui, sans-serif;
  --font-heading: 'Exo', system-ui, sans-serif;
  --font-body: 'Exo', system-ui, sans-serif;
  --font-weight-body: 400;
  --font-size-body: 1rem;           /* 16px */
  --font-size-sm: 0.875rem;         /* 14px */
  --font-size-ui: 1.25rem;          /* 20px — menü/buton */
  --font-size-h1: 2.75rem;          /* 44px */
  --font-size-h2: 2.25rem;          /* 36px — Text Content Heading */
  --font-size-h3: 1.375rem;         /* 22px — kart başlığı */
  --font-size-lead: 1.375rem;       /* 22px — iç sayfa gövde metni (Exo 2) */

  --line-height-body: 1.5;
  --line-height-heading: 1.2;
  --letter-spacing-heading: -0.02em;

  /* --- Boşluk (Figma sds-size-space) --- */
  --space-2xs: 0.5rem;   /* 8  */
  --space-xs: 0.75rem;   /* 12 */
  --space-sm: 1rem;      /* 16 */
  --space-md: 1.5rem;    /* 24 */
  --space-lg: 2rem;      /* 32 */
  --space-xl: 3rem;      /* 48 */
  --space-2xl: 4rem;     /* 64 */

  /* --- Kenar yuvarlaklığı --- */
  --radius-sm: 0.5rem;    /* 8px  — buton, input, pill */
  --radius-md: 1.25rem;   /* 20px — ürün kartı */
  --radius-lg: 1.1875rem; /* 19px — görsel */

  /* --- Gölge --- */
  --shadow-button: 0 4px 6px rgba(15, 50, 83, 0.3);
  --shadow-card: 0 2px 12px rgba(15, 50, 83, 0.08);
  --shadow-popover: 0 8px 24px rgba(15, 50, 83, 0.18);
  --shadow-strip: 0 4px 4px rgba(15, 50, 83, 0.16);

  /* --- Layout --- */
  --container-max: 1440px;
  --container-padding: clamp(4rem, 5.333vw, 4.8rem); /* Figma: 64px / 1200px canvas */

  /* --- Hareket --- */
  --transition-fast: 0.16s ease;
  --transition-base: 0.24s ease;
}