/* ==========================================================================
   ✏️ THEME · colours, fonts and shapes of the whole website.
   Change a value here and it changes everywhere. Colours accept any CSS
   format (#hex, rgb(), hsl()).
   ========================================================================== */

/* ---------- Fonts (files in /fonts, SIL Open Font License) ----------
   To use other fonts: put the .woff2 files in /fonts, change the @font-face
   blocks below and the two --font-* variables. */
@font-face {
  font-family: 'Gloock';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/gloock-latin.woff2') format('woff2');
  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: 'Gloock';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/gloock-latin-ext.woff2') format('woff2');
  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: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/hanken-grotesk-latin.woff2') format('woff2');
  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: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/hanken-grotesk-latin-ext.woff2') format('woff2');
  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;
}

:root {
  /* ---------- Dark sections (most of the page) ---------- */
  --bg: #14100d;            /* background: warm charcoal */
  --surface: #1e1915;       /* cards and panels */
  --fg: #f1e8da;            /* text: bone */
  --muted: #b9ac9a;         /* secondary text */
  --line: rgb(241 232 218 / 0.14);
  --line-strong: rgb(241 232 218 / 0.32);
  --accent: #ff6b3d;        /* ember: buttons, highlights, prices */
  --accent-fg: #1a0d07;     /* text on top of the accent colour */

  /* ---------- Light sections (menu and booking) ---------- */
  --light-bg: #efe6d8;
  --light-surface: #e5dac9;
  --light-fg: #1b1511;
  --light-muted: #5e5246;
  --light-line: rgb(27 21 17 / 0.14);
  --light-line-strong: rgb(27 21 17 / 0.3);
  --light-accent: #a3330a;
  --light-accent-fg: #ffffff;

  /* ---------- Fonts ---------- */
  --font-display: 'Gloock', Georgia, 'Times New Roman', serif;   /* titles */
  --font-body: 'Hanken Grotesk', ui-sans-serif, system-ui, sans-serif;  /* text */

  /* ---------- Shapes ---------- */
  --radius: 1.25rem;        /* images and cards (0 = square corners) */
  --radius-sm: 0.7rem;      /* form fields */
  --radius-btn: 999px;      /* buttons (999px = pill) */

  /* ---------- Layout ---------- */
  --max: 1440px;            /* maximum content width */
  --header-h: 4.5rem;

  /* Fluid type scale (mobile → desktop) */
  --step--2: clamp(0.74rem, 0.72rem + 0.1vw, 0.8rem);
  --step--1: clamp(0.86rem, 0.83rem + 0.15vw, 0.95rem);
  --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --step-1: clamp(1.15rem, 1.06rem + 0.45vw, 1.45rem);
  --step-2: clamp(1.4rem, 1.2rem + 1vw, 2rem);
  --step-3: clamp(1.8rem, 1.45rem + 1.8vw, 3rem);
  --step-4: clamp(2.3rem, 1.7rem + 3.2vw, 4.8rem);
  --step-5: clamp(2.8rem, 1.8rem + 5.2vw, 7.5rem);
  --step-6: clamp(3.4rem, 1.6rem + 9vw, 11rem);

  /* Spacing */
  --gutter: clamp(1rem, 0.5rem + 3vw, 3rem);
  --space-s: 1rem;
  --space-m: clamp(1.25rem, 1rem + 1vw, 2rem);
  --space-l: clamp(2rem, 1.5rem + 2vw, 3.5rem);
  --space-xl: clamp(3rem, 2rem + 4vw, 6rem);
  --section: clamp(4.5rem, 3rem + 7vw, 10rem);

  /* Motion easing */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
}