/* ============================================================
   HARRY'S DESIGN TOKENS
   ------------------------------------------------------------
   Einzige Stelle für Marke: Farben, Schriften, Abstände, Radien,
   Schatten, Bewegung. Komponenten (main.css) verwenden NUR diese
   Variablen. Für Harry's Appartement wird genau diese Datei durch
   eine eigene Token-Datei ersetzt/überschrieben – siehe DESIGN.md.
   ============================================================ */

/* ── Schriften (selbst gehostet, DSGVO-freundlich, OFL-Lizenz) ── */
@font-face {
  font-family: "Bebas Neue";
  src: url("../fonts/bebas-neue-latin-400-normal.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Bebas Neue";
  src: url("../fonts/bebas-neue-latin-ext-400-normal.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "DM Sans";
  src: url("../fonts/dm-sans-latin-wght-normal.woff2") format("woff2-variations");
  font-weight: 100 1000; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "DM Sans";
  src: url("../fonts/dm-sans-latin-ext-wght-normal.woff2") format("woff2-variations");
  font-weight: 100 1000; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "DM Sans";
  src: url("../fonts/dm-sans-latin-wght-italic.woff2") format("woff2-variations");
  font-weight: 100 1000; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/jetbrains-mono-latin-400-normal.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/jetbrains-mono-latin-500-normal.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}

:root {
  /* ── Markenfarben (1:1 aus dem Logo) ── */
  --c-red:        #DC2526;   /* Stern */
  --c-red-deep:   #A8181A;   /* Hover, Schatten */
  --c-red-text:   #B51D1E;   /* Rot für kleine Schrift auf Creme (AA 5.7:1) */
  --c-ink:        #353D3E;   /* Logo-Banner, Anthrazit */
  --c-ink-deep:   #242A2B;
  --c-night:      #161B1D;   /* Nachthimmel, Footer */
  --c-cream:      #F3F1DF;   /* Logo-Schrift */
  --c-paper:      #FBF8EE;   /* Seitenhintergrund */
  --c-white:      #FFFFFF;

  /* ── Nebenfarben (Food-Akzente, sparsam!) ── */
  --c-mustard:    #F2B632;
  --c-bun:        #E09A3E;
  --c-leaf:       #4F8A2B;
  --c-open:       #2EB85C;
  --c-closed:     #E0524F;

  /* ── Semantische Rollen (Komponenten nutzen diese) ── */
  --bg:            var(--c-paper);
  --bg-alt:        var(--c-cream);
  --bg-inverse:    var(--c-ink);
  --fg:            var(--c-ink);
  --fg-muted:      color-mix(in oklab, var(--c-ink) 72%, transparent);
  --fg-inverse:    var(--c-cream);
  --accent:        var(--c-red);
  --accent-hover:  var(--c-red-deep);
  --accent-text:   var(--c-red-text);
  --on-accent:     var(--c-white);
  --line:          color-mix(in oklab, var(--c-ink) 14%, transparent);
  --line-strong:   color-mix(in oklab, var(--c-ink) 30%, transparent);
  --surface:       var(--c-white);

  /* ── Typografie ── */
  --font-display: "Bebas Neue", "Oswald", "Arial Narrow", Impact, sans-serif;
  --font-body:    "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --fs-hero:  clamp(3.6rem, 7.6vw, 7.8rem);   /* H1 Startseite */
  --fs-h1:    clamp(3rem, 7vw, 6rem);
  --fs-h2:    clamp(2.5rem, 6vw, 5rem);
  --fs-h3:    clamp(1.6rem, 2.6vw, 2.1rem);
  --fs-lead:  clamp(1.05rem, 1.35vw, 1.25rem);
  --fs-body:  1.0625rem;  /* 17px */
  --fs-small: .875rem;
  --fs-label: .75rem;     /* Mono-Labels, Eyebrows */
  --lh-tight: .95;
  --lh-body:  1.6;
  --tracking-label: .2em;

  /* ── Abstände & Layout ── */
  --space-1: .25rem;  --space-2: .5rem;  --space-3: .75rem; --space-4: 1rem;
  --space-5: 1.5rem;  --space-6: 2rem;   --space-7: 3rem;   --space-8: 4.5rem;
  --max:         1240px;
  --gutter:      clamp(16px, 4vw, 56px);
  --section-pad: clamp(64px, 9vw, 136px);
  --header-h:    72px;

  /* ── Formen ── */
  --radius-s:    4px;
  --radius-m:    10px;
  --radius-l:    22px;
  --radius-pill: 999px;
  --border-bold: 3px solid var(--c-ink);   /* Diner-Rahmen */
  --tilt:        -3deg;                    /* Logo-Schräge für Sticker */

  /* ── Schatten ── */
  --shadow-1: 0 1px 0 rgba(0,0,0,.04), 0 12px 30px -18px rgba(20,20,20,.25);
  --shadow-2: 0 30px 60px -30px rgba(20,20,20,.35);
  --shadow-3: 0 40px 90px -30px rgba(10,10,10,.55);
  --shadow-sticker: 4px 4px 0 var(--c-ink);   /* harter Retro-Offset-Schatten */

  /* ── Bewegung ── */
  --ease-out:    cubic-bezier(.2,.8,.2,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
  --dur-1: .15s;
  --dur-2: .35s;
  --dur-3: .8s;
}