/* ==========================================================================
   EggMaster — Design Tokens
   DESIGN.md dosyasindaki degerlerin tek kaynagi. Baska hicbir CSS dosyasinda
   ham renk/olcu kullanilmaz; her sey buradaki degiskenlerden okunur.
   WordPress'e gecerken bu dosya oldugu gibi temaya tasinir.
   ========================================================================== */

:root {
  /* --- Surfaces ---------------------------------------------------------- */
  --em-surface: #fff9eb;
  --em-surface-dim: #e0dac7;
  --em-surface-lowest: #ffffff;
  --em-surface-low: #faf3e0;
  --em-surface-container: #f4eedb;
  --em-surface-high: #efe8d5;
  --em-surface-highest: #e9e2d0;

  /* --- Content ----------------------------------------------------------- */
  --em-ink: #1e1c10;              /* on-surface */
  --em-ink-variant: #4d4732;      /* on-surface-variant */
  --em-ink-deep: #333024;         /* inverse-surface / koyu bantlar */
  --em-on-ink: #f7f0de;           /* inverse-on-surface */
  --em-outline: #7e775f;
  --em-outline-variant: #d0c6ab;

  /* --- Primary (Yolk) ---------------------------------------------------- */
  --em-primary: #705d00;
  --em-on-primary: #ffffff;
  --em-yolk: #ffd700;             /* primary-container — CTA dolgusu */
  --em-yolk-dim: #e9c400;         /* inverse-primary */
  --em-yolk-soft: #ffe16d;        /* primary-fixed */
  --em-on-yolk: #221b00;          /* on-primary-fixed */

  /* --- Secondary (Warm Orange) ------------------------------------------- */
  --em-secondary: #9b4500;
  --em-orange: #fc8a40;
  --em-orange-soft: #ffb68d;
  --em-on-orange: #331200;

  /* --- Tertiary ---------------------------------------------------------- */
  --em-tertiary: #4e6073;
  --em-tertiary-container: #c9dcf3;

  /* --- Status ------------------------------------------------------------ */
  --em-error: #ba1a1a;
  --em-on-error: #ffffff;

  /* --- Typography: families ---------------------------------------------- */
  --em-font-display: "Fraunces", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --em-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* --- Typography: scale (mobil -> masaustu akiskan) ---------------------- */
  --em-display-lg-size: clamp(2.25rem, 1.55rem + 2.3vw, 3rem);   /* 36 -> 48 */
  --em-display-lg-lh: 1.15;
  --em-display-lg-ls: -0.02em;

  --em-headline-md-size: clamp(1.625rem, 1.35rem + 0.9vw, 2rem); /* 26 -> 32 */
  --em-headline-md-lh: 1.25;

  --em-headline-sm-size: clamp(1.375rem, 1.25rem + 0.4vw, 1.5rem); /* 22 -> 24 */
  --em-headline-sm-lh: 1.33;

  --em-body-lg-size: 1.125rem;    /* 18 */
  --em-body-lg-lh: 1.56;
  --em-body-md-size: 1rem;        /* 16 */
  --em-body-md-lh: 1.5;
  --em-body-sm-size: 0.875rem;    /* 14 */

  --em-label-caps-size: 0.75rem;  /* 12 */
  --em-label-caps-ls: 0.1em;

  --em-ui-button-size: 1rem;

  /* --- Radius ------------------------------------------------------------ */
  --em-radius-sm: 0.25rem;
  --em-radius: 0.5rem;
  --em-radius-md: 0.75rem;
  --em-radius-lg: 1rem;
  --em-radius-xl: 1.5rem;
  --em-radius-full: 9999px;

  /* --- Spacing (8px baseline) -------------------------------------------- */
  --em-space-1: 8px;
  --em-space-2: 16px;
  --em-space-3: 24px;
  --em-space-4: 32px;
  --em-space-5: 40px;
  --em-space-6: 48px;
  --em-space-8: 64px;
  --em-space-10: 80px;
  --em-space-12: 96px;

  --em-stack-sm: 8px;
  --em-stack-md: 16px;
  --em-stack-lg: 32px;
  --em-stack-xl: 64px;

  /* --- Layout ------------------------------------------------------------ */
  --em-container: 1200px;
  --em-gutter: 24px;
  --em-margin-mobile: 20px;
  --em-margin-desktop: 40px;
  --em-header-h: 64px;
  --em-section-y: clamp(56px, 7vw, 96px);

  /* --- Elevation (asla nötr gri/siyah degil) ----------------------------- */
  --em-shadow-warm: 0 1px 2px rgba(77, 71, 50, 0.06), 0 10px 28px rgba(77, 71, 50, 0.1);
  --em-shadow-warm-sm: 0 1px 2px rgba(77, 71, 50, 0.06), 0 4px 12px rgba(77, 71, 50, 0.08);
  --em-shadow-warm-lg: 0 2px 4px rgba(77, 71, 50, 0.06), 0 24px 60px rgba(77, 71, 50, 0.16);
  --em-glow-yolk: 0 4px 14px rgba(233, 196, 0, 0.35), 0 12px 32px rgba(233, 196, 0, 0.28);
  --em-glow-yolk-lg: 0 0 60px rgba(255, 215, 0, 0.45), 0 0 120px rgba(252, 138, 64, 0.22);

  /* --- Motion ------------------------------------------------------------ */
  --em-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --em-dur-fast: 150ms;
  --em-dur: 250ms;
  --em-dur-slow: 400ms;

  /* --- Z-index ----------------------------------------------------------- */
  --em-z-grain: 900;
  --em-z-header: 1000;
  --em-z-overlay: 1100;
}