/* =========================================================
   FK Designstudio — Foundation Tokens
   Colors · Type · Spacing · Radii · Shadows · Motion
   ========================================================= */

/* Lora — heading & accent font (self-hosted woff2) */
@font-face { font-family:'Lora'; font-weight:400; font-style:normal; src:url('fonts/lora/lora-400.woff2') format('woff2'); font-display:swap; }
@font-face { font-family:'Lora'; font-weight:600; font-style:normal; src:url('fonts/lora/lora-600.woff2') format('woff2'); font-display:swap; }
@font-face { font-family:'Lora'; font-weight:700; font-style:normal; src:url('fonts/lora/lora-700.woff2') format('woff2'); font-display:swap; }
@font-face { font-family:'Lora'; font-weight:400; font-style:italic; src:url('fonts/lora/lora-italic-400.woff2') format('woff2'); font-display:swap; }
@font-face { font-family:'Lora'; font-weight:600; font-style:italic; src:url('fonts/lora/lora-italic-600.woff2') format('woff2'); font-display:swap; }

/* Inter — body & label font (self-hosted woff2) */
@font-face { font-family:'Inter'; font-weight:400; font-style:normal; src:url('fonts/inter/inter-400.woff2') format('woff2'); font-display:swap; }
@font-face { font-family:'Inter'; font-weight:500; font-style:normal; src:url('fonts/inter/inter-500.woff2') format('woff2'); font-display:swap; }
@font-face { font-family:'Inter'; font-weight:600; font-style:normal; src:url('fonts/inter/inter-600.woff2') format('woff2'); font-display:swap; }
@font-face { font-family:'Inter'; font-weight:700; font-style:normal; src:url('fonts/inter/inter-700.woff2') format('woff2'); font-display:swap; }

:root {
  /* ---------- CORE PALETTE ---------- */
  --ink:            #171912;   /* near-black, warm */
  --ink-2:          #27231e;   /* raised dark */
  --ink-3:          #3a3528;   /* muted dark */

  --olive:          #4d5b43;   /* foundation green */
  --olive-deep:     #255424;   /* logo letter fill */
  --olive-muted:    #494831;   /* earth olive */

  --caramel:        #876139;   /* warm primary */
  --caramel-light:  #aa8154;
  --caramel-pale:   #c49b69;
  --caramel-deep:   #735328;   /* logo rim */

  --lime:           #7ee832;   /* SIGNAL — primary accent */
  --lime-dark:      #6bcd23;   /* hover */
  --lime-deep:      #4a9a15;   /* pressed / dark-bg text */

  --orange:         #ff8117;   /* SIGNAL — secondary accent (logo frame) */
  --orange-dark:    #e06a00;
  --accent-red:     #ff3b5c;   /* rare high-emphasis signal (EXKLUSIV etc.) */

  --bone:           #b2a79d;   /* warm muted neutral */
  --paper:          #f5f2ec;   /* warm off-white BG */
  --paper-2:        #ebe6dc;   /* raised paper */
  --paper-3:        #dcd5c7;   /* borders on paper */
  --white:          #ffffff;

  /* ---------- SEMANTIC FOREGROUND / BACKGROUND ---------- */
  --bg:             var(--paper);
  --bg-raised:      var(--white);
  --bg-sunk:        var(--paper-2);
  --bg-inverse:     var(--ink);

  --fg:             var(--ink);
  --fg-2:           #4a4639;       /* secondary text */
  --fg-3:           #6f6a5a;       /* tertiary / meta */
  --fg-inverse:     var(--paper);
  --fg-inverse-2:   #d7d1c1;

  --border:         rgba(23, 25, 18, 0.12);
  --border-strong:  rgba(23, 25, 18, 0.22);
  --border-inverse: rgba(245, 242, 236, 0.12);

  /* ---------- SEMANTIC ACCENTS ---------- */
  --accent:         var(--lime);
  --accent-hover:   var(--lime-dark);
  --accent-pressed: var(--lime-deep);
  --accent-fg:      var(--ink);            /* text ON lime */

  --accent-2:       var(--orange);
  --accent-2-hover: var(--orange-dark);

  /* ---------- STATUS ---------- */
  --success:        #2ecc71;
  --danger:         #d64545;
  --warning:        #e9a84a;
  --info:           #3b7dd8;

  /* ---------- TYPE ----------
     Primary typeface system: Lora (headings) + Inter (body) */
  --font-display:   'Lora', Georgia, serif;
  --font-brand:     'Inter', system-ui, sans-serif;
  --font-mono:      'Menlo', 'Monaco', monospace;

  /* Default theme = Gasthof zur Peif (Mediterranean warmth + modern web-optimized) */
  --font-heading:   'Lora', Georgia, serif;
  --font-body:      'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-accent:    'Lora', Georgia, serif;
  --font-premium:   'Lora', Georgia, serif;
  /* Legacy alias kept for existing components */
  --font-headline:  var(--font-brand);

  /* Fluid type scale (clamp-based) */
  --text-xs:   clamp(0.75rem,  0.7rem  + 0.25vw,  0.875rem);
  --text-sm:   clamp(0.875rem, 0.825rem + 0.25vw, 1rem);
  --text-base: clamp(1rem,     0.95rem + 0.25vw,  1.125rem);
  --text-lg:   clamp(1.125rem, 1.05rem + 0.375vw, 1.25rem);
  --text-xl:   clamp(1.25rem,  1.15rem + 0.5vw,   1.5rem);
  --text-2xl:  clamp(1.5rem,   1.35rem + 0.75vw,  2rem);
  --text-3xl:  clamp(2rem,     1.75rem + 1.25vw,  3rem);
  --text-4xl:  clamp(2.5rem,   2rem    + 2.5vw,   4rem);

  /* Legacy static scale (still used by some preview cards) */
  --fs-12:  0.75rem;
  --fs-14:  0.875rem;
  --fs-16:  1rem;
  --fs-18:  1.125rem;
  --fs-20:  1.25rem;
  --fs-24:  1.5rem;
  --fs-32:  2rem;
  --fs-40:  2.5rem;
  --fs-56:  3.5rem;
  --fs-80:  5rem;
  --fs-120: 7.5rem;

  --leading-tight:   1.2;
  --leading-normal:  1.5;
  --leading-relaxed: 1.75;
  /* Legacy aliases */
  --lh-tight:   1.04;
  --lh-snug:    var(--leading-tight);
  --lh-normal:  var(--leading-normal);
  --lh-loose:   var(--leading-relaxed);

  --tracking-display: -0.01em;
  --tracking-tight:   -0.02em;
  --tracking-normal:  0em;
  --tracking-wide:    0.06em;
  --tracking-caps:    0.12em;    /* ALL-CAPS eyebrows / buttons */

  /* ---------- SPACING (4 px base) ---------- */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;
  --space-20:  80px;
  --space-24:  96px;
  --space-32:  128px;

  /* ---------- RADII ---------- */
  --radius-sm:   4px;
  --radius-md:   6px;     /* default button / input */
  --radius-lg:   10px;    /* cards */
  --radius-xl:   16px;
  --radius-2xl:  24px;
  --radius-full: 9999px;

  /* ---------- SHADOWS ---------- */
  --shadow-xs:   0 1px 1px rgba(23,25,18,0.05);
  --shadow-sm:   0 1px 2px rgba(23,25,18,0.08);
  --shadow-md:   0 4px 16px rgba(23,25,18,0.10);
  --shadow-lg:   0 20px 48px -12px rgba(23,25,18,0.25);
  --shadow-xl:   0 32px 80px -20px rgba(23,25,18,0.35);
  --shadow-focus:       0 0 0 4px rgba(126, 232, 50, 0.35);
  --shadow-focus-orange:0 0 0 4px rgba(255, 129, 23, 0.35);

  /* ---------- MOTION ---------- */
  --dur-micro:    150ms;
  --dur-standard: 240ms;
  --dur-enter:    400ms;
  --ease-out:     cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in-out:  cubic-bezier(0.65, 0, 0.35, 1);

  /* ---------- LAYOUT ---------- */
  --container:    1200px;
  --container-lg: 1440px;
  --header-h:     72px;
}

/* =========================================================
   THEME VARIANTS — apply via data-theme on html/body/section
   ========================================================= */

/* Standard (default) — already set in :root */

/* Premium: Fine Dining / Luxury Hotels */
[data-theme="premium"] {
  --font-heading: 'Playfair Display', Georgia, serif;
  --font-body:    'Inter', -apple-system, sans-serif;
  --font-accent:  'Cormorant Garamond', Georgia, serif;
}

/* Warm: Casual Gastro / Landhotels */
[data-theme="warm"] {
  --font-heading: 'Merriweather', Georgia, serif;
  --font-body:    'Lato', -apple-system, sans-serif;
  --font-accent:  'Merriweather', Georgia, serif;
}

/* Minimal: Asian / Minimal */
[data-theme="minimal"] {
  --font-heading: 'Work Sans', system-ui, sans-serif;
  --font-body:    'Noto Sans', system-ui, sans-serif;
  --font-accent:  'Work Sans', system-ui, sans-serif;
}

/* ---------- DARK / INK SECTIONS ---------- */
.surface-ink,
[data-surface="ink"] {
  --bg:            var(--ink);
  --bg-raised:     var(--ink-2);
  --bg-sunk:       #0f1109;
  --fg:            var(--paper);
  --fg-2:          var(--fg-inverse-2);
  --fg-3:          #9b9485;
  --border:        var(--border-inverse);
  --border-strong: rgba(245, 242, 236, 0.22);
  --accent-fg:     var(--ink);
  background: var(--bg);
  color: var(--fg);
}

/* =========================================================
   SEMANTIC TYPE STYLES
   Use classes .display, .h1..h6, .body, .eyebrow, etc.
   Or style raw h1/h2/p via the element rules below.
   ========================================================= */

html { font-family: var(--font-body); color: var(--fg); background: var(--bg); }
body { font: 400 var(--fs-16)/var(--lh-normal) var(--font-body); color: var(--fg); background: var(--bg); -webkit-font-smoothing: antialiased; }

.display, .h-display {
  font-family: var(--font-display);
  font-weight: 900;
  font-style: italic;
  font-size: clamp(3rem, 7vw, var(--fs-120));
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  color: var(--fg);
}

h1, .h1 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--text-4xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
  text-wrap: balance;
}

h2, .h2 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--text-3xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
  text-wrap: balance;
}

h3, .h3 {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--text-2xl);
  line-height: var(--leading-tight);
  color: var(--fg);
}

h4, .h4 {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--text-xl);
  line-height: var(--lh-snug);
  color: var(--fg);
}

h5, .h5 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-18);
  line-height: var(--lh-snug);
  color: var(--fg);
}

h6, .h6 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-16);
  line-height: var(--lh-snug);
  color: var(--fg);
}

p, .body {
  font-family: var(--font-body);
  font-size: var(--fs-16);
  line-height: var(--lh-normal);
  color: var(--fg-2);
  text-wrap: pretty;
}

.body-lg    { font-size: var(--fs-18); line-height: var(--lh-normal); }
.body-sm    { font-size: var(--fs-14); line-height: var(--lh-normal); }
.meta       { font-size: var(--fs-12); color: var(--fg-3); }

/* Uppercase eyebrow — used above section titles */
.eyebrow {
  font-family: var(--font-brand);
  font-weight: 600;
  font-size: var(--fs-12);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--fg-3);
}

/* Premium serif accent — fine-dining only */
.premium {
  font-family: var(--font-premium);
  font-style: italic;
  font-weight: 400;
}

/* Link default */
a {
  color: var(--fg);
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  transition: color var(--dur-micro) var(--ease-out);
}
a:hover { color: var(--accent-pressed); }

code, pre { font-family: var(--font-mono); font-size: 0.925em; }

/* Utility: focus-ring for keyboard nav */
.focus-ring:focus-visible,
button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Selection */
::selection { background: var(--lime); color: var(--ink); }