/* lumen — warm editorial premium with a cinematic light↔dark rhythm.
   Inspired by the emergent.sh teardown (2026-05-25): not relentlessly dark, but
   a warm porcelain canvas with 1-2 espresso "islands" for atmosphere, ONE luminous
   accent, premium type. Display = Fraunces (opsz serif, warm), Body = Jost (geometric).
   Both light AND dark modes are designed to look good; dark mode is warm espresso,
   never near-black. */

@font-face {
  font-family: "Fraunces";
  src: url("/demo/eidels-kebap/fonts/fraunces-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("/demo/eidels-kebap/fonts/fraunces-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Jost";
  src: url("/demo/eidels-kebap/fonts/jost-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Jost";
  src: url("/demo/eidels-kebap/fonts/jost-500.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}

:root {
  color-scheme: light dark;

  /* --- light: warm porcelain canvas (dominant) --- */
  --color-bg: #f7f2ea;            /* warm porcelain */
  --color-text: #211b15;          /* warm ink */
  --color-text-muted: #6a5f53;    /* 5.0:1 on bg */
  --color-primary: #b3431f;       /* terracotta (buttons/marks); white text = 4.9:1 */
  --color-primary-contrast: #ffffff;
  --color-link: #a83d1c;          /* slightly deeper terracotta for body links: 5.2:1 on bg */
  --color-accent: #2f5d44;        /* deep pine, the secondary/fresh note: 6.6:1 on bg */
  --color-surface: #efe7d9;       /* card cream */
  --color-border: #d8ccb8;        /* soft warm border (premium, not brutalist ink) */
  --color-hairline: #e3d9c8;      /* faint list hairline */
  --color-success: #3f7a2e;
  --color-error: #b0342a;

  /* island tokens: in LIGHT mode the islands are dark espresso. They flip in
     the dark @media block so the rhythm survives in both system modes. */
  --island-bg: #1a1410;
  --island-surface: #251d16;
  --island-text: #f4ecde;
  --island-muted: #b6a892;        /* 6.0:1 on island-bg */
  --island-border: rgba(244, 236, 222, 0.16);
  --island-hairline: rgba(244, 236, 222, 0.10);

  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-heading: "Jost", system-ui, sans-serif;
  --font-body: "Jost", system-ui, sans-serif;

  --space-1: 0.25rem;  --space-2: 0.5rem;  --space-3: 0.75rem;
  --space-4: 1rem;     --space-6: 1.5rem;  --space-8: 2rem;
  --space-12: 3rem;    --space-16: 4rem;

  /* premium = gently rounded (emergent register), not the brutalist 0 of casual-young */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;

  --container-max: 1180px;
  --header-h: 68px;

  /* refined layered shadow, not a single big AI blur */
  --shadow-sm: 0 1px 2px rgba(33, 27, 21, 0.06), 0 4px 14px rgba(33, 27, 21, 0.08);
  --shadow-md: 0 2px 6px rgba(33, 27, 21, 0.08), 0 16px 40px rgba(33, 27, 21, 0.14);

  --duration-fast: 140ms;
  --duration-base: 320ms;
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* warm espresso dark mode (NEVER near-black) + islands flip to light */
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #17120e;
    --color-text: #f4ecde;
    --color-text-muted: #b1a491;   /* 6.2:1 on bg */
    --color-primary: #e3683b;
    --color-primary-contrast: #17120e;
    --color-link: #f0936a;         /* 7.3:1 on bg */
    --color-accent: #74b389;
    --color-surface: #221a14;
    --color-border: rgba(244, 236, 222, 0.16);
    --color-hairline: rgba(244, 236, 222, 0.10);

    --island-bg: #f7f2ea;
    --island-surface: #efe7d9;
    --island-text: #211b15;
    --island-muted: #6a5f53;
    --island-border: rgba(33, 27, 21, 0.14);
    --island-hairline: rgba(33, 27, 21, 0.10);

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 14px rgba(0, 0, 0, 0.5);
    --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.45), 0 16px 40px rgba(0, 0, 0, 0.6);
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

* { box-sizing: border-box; }
html { }
body {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 400;
  background: var(--color-bg);
  color: var(--color-text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* very subtle warm grain for atmosphere (premium = whisper, not texture-bomb) */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  will-change: transform;
  transform: translateZ(0);
}
@media (prefers-reduced-motion: reduce) { body::after { display: none; } }

/* --- type: Fraunces display (warm editorial), Jost for labels/body ---
   Weight 400 with opsz=auto: at display sizes Fraunces renders display-cut
   (full, presentable) without forcing a second font-file download. Keeping
   it at 400 means the preloaded fraunces-400 is the LCP font, not a late
   fraunces-600 fetch (which was costing ~4 Lighthouse perf points). */
h1, h2 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -0.015em;
  margin: 0;
  font-optical-sizing: auto;
}
h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.005em;
  margin: 0;
}
/* eyebrow micro-labels (the emergent "ndot" role, played by Jost caps) */
.story__eyebrow, .order__eyebrow, .reserve__eyebrow, .menu__eyebrow, .reviews__eyebrow,
[class$="__eyebrow"] {
  font-family: var(--font-heading);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.74rem;
  color: var(--color-primary);
}
a { color: var(--color-link, var(--color-primary)); text-underline-offset: 3px; }
a:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 2px; }

.container { max-width: var(--container-max); margin-inline: auto; padding-inline: var(--space-4); }

.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--color-primary); color: var(--color-primary-contrast);
  padding: var(--space-2) var(--space-4); z-index: 1000; border-radius: var(--radius-sm);
}
.skip-link:focus { left: var(--space-2); top: var(--space-2); }

/* --- buttons: premium pill, soft lift on hover (no brutalist offset) --- */
button, .btn {
  font: inherit; cursor: pointer;
  font-family: var(--font-heading);
  font-weight: 500;
  letter-spacing: 0.02em;
  padding: var(--space-3) var(--space-6);
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--color-primary); color: var(--color-primary-contrast);
  min-height: 46px;
  box-shadow: var(--shadow-sm);
  transition: transform var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out),
              filter var(--duration-fast) var(--ease-out);
}
button:hover, .btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); filter: brightness(1.04); }
button:active, .btn:active { transform: translateY(0); box-shadow: var(--shadow-sm); }
button:focus-visible, .btn:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 3px; }

/* secondary / outline button keeps the ink, gets a hairline */
.btn--ghost, .btn[data-variant="ghost"] {
  background: transparent; color: var(--color-text);
  border-color: var(--color-border);
}
.btn--ghost:hover, .btn[data-variant="ghost"]:hover { border-color: var(--color-text); }

/* cards / surfaces get the gentle radius */
.card, .menu__item, .review, .highlight { border-radius: var(--radius-md); }

/* ============================================================
   THE RHYTHM: dark espresso islands in light mode (and light
   islands in dark mode). Override the color custom-properties on
   the section so every child component inherits the island theme.
   Components paint their own background from var(--color-bg), so we
   override the vars rather than fighting Astro's scoped background.
   ============================================================ */
.story, .reserve {
  --color-bg: var(--island-bg);
  --color-surface: var(--island-surface);
  --color-text: var(--island-text);
  --color-text-muted: var(--island-muted);
  --color-border: var(--island-border);
  --color-hairline: var(--island-hairline);
  background-color: var(--island-bg);
  color: var(--island-text);
  position: relative;
  isolation: isolate;
}
/* luminous accent glow on the islands (the emergent spectral touch, warmed up).
   Static: two radial gradients, one paint, no animation. Animating large
   radial-gradient pseudo-elements with color-mix() costs Style+Paint on every
   frame even at slow keyframe durations, which costs ~4 Lighthouse perf points.
   The static glow already reads as luminous; movement was barely perceptible. */
.story::before, .reserve::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(60% 80% at 15% 0%, color-mix(in oklab, var(--color-primary) 22%, transparent), transparent 60%),
    radial-gradient(55% 75% at 95% 100%, color-mix(in oklab, var(--color-accent) 20%, transparent), transparent 60%);
  opacity: 0.55;
}
/* keep island eyebrow/links readable against the flipped theme */
.story a, .reserve a { color: var(--color-link); }

/* --- Performance: skip layout/paint of below-the-fold sections until near --- */
.reviews, .story, .hours, .menu, .gallery, .loc, .order, .reserve, .contact-form, .footer {
  content-visibility: auto;
  contain-intrinsic-size: auto 700px;
}

/* 2026 typography defaults: balanced headings + pretty body wrap.
   text-wrap: balance distributes lines so the last line is similar length to others
   (no orphan word). pretty avoids single-word orphans in paragraphs. Both are
   progressive enhancements: browsers without support fall back gracefully. */
h1, h2, h3, h4, h5, h6 { text-wrap: balance; }
p, li, blockquote, dd { text-wrap: pretty; }