/* ============================================================================
   _kit / tokens.css  —  Bochum Gastro design system
   ----------------------------------------------------------------------------
   Shared design foundation for the fleet of premium restaurant one-pagers.
   Load FIRST, before base.css.

   STRUCTURE
     1. Fonts            — single @import covering every world (one network call)
     2. :root            — world-AGNOSTIC base tokens (space, type, radius, motion)
     3. [data-world]     — 8 self-contained WORLDS (full palette + font pairing)

   A "world" = a complete colour palette (dark surfaces, light surfaces, ink,
   text, accent + accent-soft + accent-ink) AND a display/body font pairing.
   Switch worlds by setting <html data-world="ember"> etc. Everything in
   base.css reads only the tokens defined here, so no component code changes.

   PER-SITE OVERRIDES: a site may re-define a handful of tokens (most often
   --accent / --accent-soft / a font) in a tiny inline <style> — see BUILD-GUIDE.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   1. FONTS  —  one import, all 8 worlds. (Documented alternative: split into
   per-world <link> tags if a site wants to ship only the fonts it uses.)
   --------------------------------------------------------------------------- */
/* GEAENDERT 22.09.2026: Der Google-Fonts-@import ist raus.
   Auf einem WLAN, das nicht routet, blockiert er das erste Zeichnen und die
   Seite bleibt weiss — genau das ist bei Cafe Immerschoen passiert.
   Die beiden Schriften dieser Welt liegen jetzt lokal daneben. */
@import url('schriften/schriften.css');

/* ---------------------------------------------------------------------------
   2. :root  —  WORLD-AGNOSTIC BASE TOKENS
   Spacing, fluid type, radii, motion, layout, shadow & line scaffolding.
   These never change between worlds; only colours + fonts do.
   --------------------------------------------------------------------------- */
:root {
  /* --- Layout ----------------------------------------------------------- */
  --wrap: 1340px;                 /* max container width */
  --wrap-narrow: 880px;           /* prose / centred heads */
  --nav-h: 76px;                  /* sticky header height */
  --pad-inline: clamp(20px, 4.5vw, 48px);

  /* --- Spacing scale (8px base, fluid section rhythm) ------------------- */
  --sp-1: 4px;   --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 24px;  --sp-6: 32px;  --sp-7: 48px;  --sp-8: 64px;
  --sp-9: 96px;  --sp-10: 128px;
  --section-y: clamp(72px, 9vw, 130px);   /* vertical padding per section */

  /* --- Radii ------------------------------------------------------------ */
  --radius-xs: 8px;
  --radius-sm: 12px;
  --radius: 18px;
  --radius-card: 22px;
  --radius-lg: 32px;
  --radius-pill: 999px;
  --radius-arch: 300px;           /* rounded-top "arch" frame */

  /* --- Fluid type scale (clamp; min @ ~360px → max @ ~1340px) ----------- */
  --fs-eyebrow: 12.5px;
  --fs-body:    clamp(1rem, 0.97rem + 0.18vw, 1.06rem);     /* ~16–17px */
  --fs-lead:    clamp(1.12rem, 1.05rem + 0.4vw, 1.28rem);
  --fs-h3:      clamp(1.4rem, 1.2rem + 1vw, 2rem);
  --fs-h2:      clamp(2rem, 1.5rem + 2.4vw, 3.1rem);
  --fs-h1:      clamp(2.5rem, 1.6rem + 4vw, 4.3rem);
  --fs-display: clamp(86px, 15vw, 210px);   /* hero outline word-mark */
  --lh-tight: 1.12;
  --lh-body: 1.65;
  --tracking-eyebrow: 0.22em;

  /* --- Motion ----------------------------------------------------------- */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-soft: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 0.2s;
  --dur: 0.35s;
  --dur-slow: 0.85s;
  --marquee-dur: 60s;             /* reviews marquee loop */

  /* --- Line / hairline tokens (re-pointed per world) -------------------- */
  --line: rgba(255, 255, 255, 0.13);
  --line-strong: rgba(255, 255, 255, 0.22);
  --line-ink: rgba(0, 0, 0, 0.14);
  --line-ink-strong: rgba(0, 0, 0, 0.22);

  /* --- Shadow tokens (re-pointed per world for tinted glows) ------------ */
  --shadow-sm: 0 8px 24px -12px rgba(0, 0, 0, 0.45);
  --shadow-md: 0 24px 50px -22px rgba(0, 0, 0, 0.55);
  --shadow-lg: 0 40px 90px -40px rgba(0, 0, 0, 0.7);
  --shadow-accent: 0 14px 34px -14px rgba(0, 0, 0, 0.5);   /* world overrides hue */

  /* --- Hero scrim strengths (tweak per site if a video runs hot) -------- */
  --scrim-bottom: 0.92;
  --scrim-top: 0.30;
}

/* ===========================================================================
   3. DESIGN WORLDS
   Each block redefines the full palette + font pairing. Eight worlds, each
   intentionally distinct in hue, temperature and typographic voice — not
   recolours of one theme.

   Palette contract every world MUST define:
     --bg-0 / --bg-1 / --bg-2   dark surfaces (deepest → raised)
     --surface / --surface-2     light surfaces (page → raised card)
     --ink / --ink-soft          text on LIGHT surfaces
     --text / --text-soft        text on DARK surfaces
     --accent / --accent-soft    brand accent (hover/lighter variant)
     --accent-ink                accent tuned for use as text on light bg
     --on-accent                 readable text colour ON the accent fill
     --font-display / --font-body
   It also re-points --line*, --shadow-accent and ::selection-friendly hues.
   =========================================================================== */

/* --- 1) AEGEAN — Greek / Balkan Mediterranean. Midnight blue + foam white,
       warm saffron accent (override to terracotta for Balkan). GFS Didot. --- */
:root[data-world="aegean"] {
  --bg-0: #050B14;  --bg-1: #071120;  --bg-2: #0A1626;
  --surface: #F4F7FA;  --surface-2: #FFFFFF;
  --ink: #13243B;  --ink-soft: #46586E;
  --text: #E8EEF6;  --text-soft: #A9B8CB;
  --accent: #EC8706;  --accent-soft: #F5A93C;  --accent-ink: #955103;
  --on-accent: #050B14;
  --accent-2: #F2CE4B;            /* lemon highlight (stars etc.) */
  --line: rgba(222,233,245,0.13);  --line-strong: rgba(222,233,245,0.22);
  --line-ink: rgba(19,36,59,0.14); --line-ink-strong: rgba(19,36,59,0.24);
  --shadow-accent: 0 14px 34px -14px rgba(236,135,6,0.55);
  --font-display: "GFS Didot", Georgia, serif;
  --font-body: "Albert Sans", "Helvetica Neue", Arial, sans-serif;
}

/* --- 1b) BALKAN — ex-Yugoslav (Serbian / Croatian / Bosnian) grill house.
       Warm roast-brown + paprika-terracotta + clay-ochre + aged copper. NO blue
       (distinct from aegean). Bitter slab serif. Hearty, social, rustic-modern. --- */
:root[data-world="balkan"] {
  --bg-0: #1F1208;  --bg-1: #2A1C12;  --bg-2: #382517;
  --surface: #F1E7D6;  --surface-2: #FBF4E6;
  --ink: #3E270F;  --ink-soft: #6B5238;
  --text: #F3E7D5;  --text-soft: #CDB69C;
  --accent: #B5512E;              /* paprika / terracotta */
  --accent-soft: #C9925A;         /* clay ochre */
  --accent-ink: #8A3A1E;
  --on-accent: #FBF4E6;
  --accent-2: #9A6A3A;            /* aged copper */
  --line: rgba(243,231,213,0.12);  --line-strong: rgba(243,231,213,0.24);
  --line-ink: rgba(62,39,15,0.16); --line-ink-strong: rgba(62,39,15,0.28);
  --shadow-accent: 0 16px 40px -16px rgba(181,81,46,0.5);
  --font-display: "Bitter", Georgia, serif;
  --font-body: "Manrope", "Helvetica Neue", Arial, sans-serif;
}

/* --- 2) TRATTORIA — Italian. Warm cream / bordeaux / basil, terracotta-gold
       accent. Cinzel display + Cormorant serif lead + Source Sans body. --- */
:root[data-world="trattoria"] {
  --bg-0: #330606;  --bg-1: #400808;  --bg-2: #531010;
  --surface: #F9F8F7;  --surface-2: #FDFCFA;
  --ink: #352E27;  --ink-soft: #5C5248;
  --text: #F3EDE2;  --text-soft: #D8C8B6;
  --accent: #C0392B;              /* bordeaux-red brand accent */
  --accent-soft: #E7A361;         /* terracotta-gold lighter variant */
  --accent-ink: #8A2D22;
  --on-accent: #FDFCFA;
  --accent-2: #41522F;            /* basil (tricolore nod) */
  --line: rgba(243,237,226,0.12);  --line-strong: rgba(243,237,226,0.22);
  --line-ink: rgba(53,46,39,0.16); --line-ink-strong: rgba(53,46,39,0.28);
  --shadow-accent: 0 16px 38px -16px rgba(192,57,43,0.5);
  --font-display: "Cinzel", Georgia, serif;
  --font-serif: "Cormorant Garamond", Georgia, serif;   /* italic prose lead */
  --font-body: "Source Sans 3", "Helvetica Neue", Arial, sans-serif;
}

/* --- 3) LEVANTINE — Turkish / Persian / Levantine. Deep night + warm spice:
       terracotta / saffron / teal. Marcellus display + Manrope body. --- */
:root[data-world="levantine"] {
  --bg-0: #14100C;  --bg-1: #1E1812;  --bg-2: #2A2118;
  --surface: #F6EFE4;  --surface-2: #FCF8F0;
  --ink: #2C2117;  --ink-soft: #5A4A3A;
  --text: #F3E9DA;  --text-soft: #C7B49C;
  --accent: #C75B33;              /* terracotta / spice */
  --accent-soft: #E0A33E;         /* saffron */
  --accent-ink: #9A4322;
  --on-accent: #14100C;
  --accent-2: #2E7D74;            /* teal counterpoint */
  --line: rgba(243,233,218,0.12);  --line-strong: rgba(243,233,218,0.24);
  --line-ink: rgba(44,33,23,0.15); --line-ink-strong: rgba(44,33,23,0.26);
  --shadow-accent: 0 16px 38px -16px rgba(199,91,51,0.5);
  --font-display: "Marcellus", Georgia, serif;
  --font-body: "Manrope", "Helvetica Neue", Arial, sans-serif;
}

/* --- 4) EMBER — Steakhouse dark fire. Near-black, ember-orange + gold + a
       rose-red ember glow. Fraunces display (Fraunces-like). --- */
:root[data-world="ember"] {
  --bg-0: #070403;  --bg-1: #0E0806;  --bg-2: #160D09;
  --surface: #F3ECE2;  --surface-2: #FBF6EE;
  --ink: #241813;  --ink-soft: #574A40;
  --text: #F4EDE3;  --text-soft: #DACFC0;
  --accent: #E0762F;              /* ember orange */
  --accent-soft: #EC9A55;
  --accent-ink: #B05518;
  --on-accent: #070403;
  --accent-2: #D9A35B;            /* gold */
  --accent-glow: #E5252A;         /* rose-red ember glow for radials */
  --line: rgba(244,237,227,0.10);  --line-strong: rgba(244,237,227,0.20);
  --line-ink: rgba(36,24,19,0.15); --line-ink-strong: rgba(36,24,19,0.26);
  --shadow-accent: 0 16px 40px -16px rgba(224,118,47,0.55);
  --font-display: "Fraunces", Georgia, serif;
  --font-body: "Albert Sans", "Helvetica Neue", Arial, sans-serif;
}

/* --- 5) MANOR — upscale fine-dining / elegant event venue. Deep forest green
       + gold + cream. Refined Playfair Display serif. --- */
:root[data-world="manor"] {
  --bg-0: #0C1711;  --bg-1: #11201A;  --bg-2: #182E25;
  --surface: #F4F1E9;  --surface-2: #FBF9F3;
  --ink: #1D2A22;  --ink-soft: #4C5A50;
  --text: #ECEFE7;  --text-soft: #B4C2B6;
  --accent: #BE9B54;              /* refined gold */
  --accent-soft: #D6B978;
  --accent-ink: #8A6F33;
  --on-accent: #0C1711;
  --accent-2: #6E8B73;            /* sage */
  --line: rgba(236,239,231,0.12);  --line-strong: rgba(236,239,231,0.22);
  --line-ink: rgba(29,42,34,0.15); --line-ink-strong: rgba(29,42,34,0.26);
  --shadow-accent: 0 16px 40px -16px rgba(190,155,84,0.5);
  --font-display: "Playfair Display", Georgia, serif;
  --font-body: "Jost", "Helvetica Neue", Arial, sans-serif;
}

/* --- 6) ASIA — modern Asian. Dark + red / jade, clean. Override accent to
       gold/spice for Indian. Forum display + Outfit body. --- */
:root[data-world="asia"] {
  --bg-0: #0B0C0E;  --bg-1: #121417;  --bg-2: #1B1E22;
  --surface: #F5F4F2;  --surface-2: #FFFFFF;
  --ink: #1C1D20;  --ink-soft: #54565C;
  --text: #F2F1EE;  --text-soft: #ABADB2;
  --accent: #C5283D;              /* lacquer red (→ #C98A2E gold/spice for Indian) */
  --accent-soft: #E0566A;
  --accent-ink: #A11E2F;
  --on-accent: #FFFFFF;
  --accent-2: #2F8F6F;            /* jade */
  --line: rgba(242,241,238,0.11);  --line-strong: rgba(242,241,238,0.2);
  --line-ink: rgba(28,29,32,0.13); --line-ink-strong: rgba(28,29,32,0.24);
  --shadow-accent: 0 16px 40px -16px rgba(197,40,61,0.5);
  --font-display: "Forum", Georgia, serif;
  --font-body: "Outfit", "Helvetica Neue", Arial, sans-serif;
}

/* --- 7) BAR — dark cocktail bar / nightlife. Near-black + neon magenta with
       an amber glow counterpoint. DM Serif Display + Jost. --- */
:root[data-world="bar"] {
  --bg-0: #08070C;  --bg-1: #100D17;  --bg-2: #1A1525;
  --surface: #ECE8F0;  --surface-2: #F7F4FB;
  --ink: #1A1622;  --ink-soft: #4E465C;
  --text: #F0ECF6;  --text-soft: #AEA4C0;
  --accent: #E0317F;              /* neon magenta */
  --accent-soft: #F25CA0;
  --accent-ink: #B41E61;
  --on-accent: #08070C;
  --accent-2: #F0A53C;            /* amber glow counterpoint */
  --accent-glow: #7C3AED;         /* violet bloom for radials */
  --line: rgba(240,236,246,0.12);  --line-strong: rgba(240,236,246,0.24);
  --line-ink: rgba(26,22,34,0.16); --line-ink-strong: rgba(26,22,34,0.28);
  --shadow-accent: 0 16px 44px -14px rgba(224,49,127,0.6);
  --font-display: "DM Serif Display", Georgia, serif;
  --font-body: "Jost", "Helvetica Neue", Arial, sans-serif;
}

/* --- 8) CAFE — light café / patisserie. Warm pastel, airy, friendly. The one
       LIGHT-default world: page is cream, "dark" surfaces are warm cocoa.
       Fraunces friendly serif + Nunito Sans. --- */
:root[data-world="cafe"] {
  --bg-0: #3B2A22;  --bg-1: #4A362C;  --bg-2: #5A4438;   /* warm cocoa "dark" */
  --surface: #FBF4EC;  --surface-2: #FFFFFF;
  --ink: #3A2C24;  --ink-soft: #6B5A4E;
  --text: #FBF1E8;  --text-soft: #DFCBBB;
  --accent: #D98B6A;              /* terracotta-rose pastel */
  --accent-soft: #E9AE91;
  --accent-ink: #B5694A;
  --on-accent: #3B2A22;
  --accent-2: #8FA37B;            /* sage-pistachio */
  --line: rgba(251,241,232,0.16);  --line-strong: rgba(251,241,232,0.28);
  --line-ink: rgba(58,44,36,0.13); --line-ink-strong: rgba(58,44,36,0.22);
  --shadow-accent: 0 16px 38px -16px rgba(217,139,106,0.45);
  --font-display: "Fraunces", Georgia, serif;
  --font-body: "Nunito Sans", "Helvetica Neue", Arial, sans-serif;
}

/* ---------------------------------------------------------------------------
   Fallback: if no data-world is set, behave like AEGEAN so a page never
   renders unstyled while a build agent is mid-edit.
   --------------------------------------------------------------------------- */
:root:not([data-world]) {
  --bg-0: #050B14;  --bg-1: #071120;  --bg-2: #0A1626;
  --surface: #F4F7FA;  --surface-2: #FFFFFF;
  --ink: #13243B;  --ink-soft: #46586E;
  --text: #E8EEF6;  --text-soft: #A9B8CB;
  --accent: #EC8706;  --accent-soft: #F5A93C;  --accent-ink: #955103;
  --on-accent: #050B14;  --accent-2: #F2CE4B;
  --line: rgba(222,233,245,0.13);  --line-strong: rgba(222,233,245,0.22);
  --shadow-accent: 0 14px 34px -14px rgba(236,135,6,0.55);
  --font-display: "GFS Didot", Georgia, serif;
  --font-body: "Albert Sans", "Helvetica Neue", Arial, sans-serif;
}