/* ============================================================
   HAVBLIKK RESTAURANT — tokens.css
   Design tokens. Single source of truth: a full recolor must
   only ever touch this file. Token names are SEMANTIC
   (grunn/tekst/aksent), never named after a color.
   Palette "Havnatt & Gull" (Sverre 12.09.2026: darker, near
   black, gold text, premium): near-black sea grounds, ivory
   text, ONE accent = gold. Warm tones otherwise only inside the
   photographs; the turquoise lives only in the cocktail image.
   ============================================================ */

/* ---- Fonts (self-hosted WOFF2). Sverre picked no. 2 on production/fontark/fontark-v2.png
   (12.09.2026): Cinzel (Google, OFL, Roman capitals) for the wordmark and headings, Cormorant
   Garamond (Google, OFL) for the menu text. Body: Switzer (Fontshare) ---- */
@font-face { font-family: "Cinzel"; src: url("../assets/fonts/cinzel-var.woff2") format("woff2"); font-weight: 400 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url("../assets/fonts/cormorant-var.woff2") format("woff2"); font-weight: 300 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url("../assets/fonts/cormorant-var-italic.woff2") format("woff2"); font-weight: 300 700; font-style: italic; font-display: swap; }
@font-face { font-family: "Switzer"; src: url("../assets/fonts/switzer-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Switzer"; src: url("../assets/fonts/switzer-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Switzer"; src: url("../assets/fonts/switzer-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }

/* Metric-compatible fallbacks so the swap does not shift layout */
@font-face { font-family: "Display Fallback"; src: local("Georgia"), local("Times New Roman"); size-adjust: 92%; }
@font-face { font-family: "Switzer Fallback"; src: local("Helvetica Neue"), local("Arial"); size-adjust: 98%; }

:root {
  /* page surfaces (all near black: alternation is between these, the sea lives in the tint) */
  --grunn: #05090c;            /* sea night, page base */
  --grunn-dyp: #030507;        /* mirror black: bar band */
  --flate: #0a1218;            /* petrol black: kitchen band, guest book, footer */
  --flate-hev: #101b22;        /* raised cards, inputs */
  --flate-kant: rgba(239, 234, 223, 0.10);

  /* text */
  --tekst: #efeadf;            /* ivory, primary */
  --tekst-demp: #a9aca6;       /* secondary, stays AA on --grunn */

  /* gold, the ONE accent (buttons, active states, menu text, lines that matter) */
  --gull: #d9bc74;
  --gull-lys: #eedcab;         /* hover, glints */
  --gull-demp: #a99565;        /* secondary gold text, still AA on the menu ground */
  --gull-linje: rgba(217, 188, 116, 0.30);
  --gull-linje-sterk: rgba(217, 188, 116, 0.60);
  --aksent: var(--gull);
  --aksent-dyp: var(--gull-lys);
  --aksent-demp: var(--gull-demp);
  --aksent-svak: rgba(217, 188, 116, 0.10);
  --tekst-paa-aksent: #0b0a07; /* button text on gold */
  --lys-flate: rgba(217, 188, 116, 0.05); /* the lamp glow behind the menu */

  /* the menu pages: near black with a faint top light */
  --meny-flate: #07090b;
  --meny-flate-lys: #0d1215;

  /* lines (ivory based) */
  --linje: rgba(239, 234, 223, 0.10);
  --linje-sterk: rgba(239, 234, 223, 0.26);
  --linje-felt: rgba(239, 234, 223, 0.42);

  /* haze over canvas and video so DOM text stays readable */
  --dis: rgba(3, 5, 7, 0.55);
  --dis-sterk: rgba(3, 5, 7, 0.84);
  --nav-flate: rgba(3, 5, 7, 0.80);    /* nav once scrolled */
  --skygge: rgba(0, 0, 0, 0.60);       /* text shadow over imagery, page shadow */

  /* type */
  --font-display: "Cinzel", "Display Fallback", Georgia, serif;            /* wordmark, logo, h1 to h3: always uppercase, tracked */
  --font-meny: "Cormorant Garamond", "Display Fallback", Georgia, serif;  /* menu text, word cards, hero end title */
  --sporing-display: 0.08em;           /* letter-spacing for the capitals */
  --font-body: "Switzer", "Switzer Fallback", "Helvetica Neue", Arial, sans-serif;

  /* fluid scale (body never under 17px mobile / 18px desktop) */
  --tekst-xs: 0.75rem;
  --tekst-s: clamp(0.9rem, 0.85rem + 0.2vw, 1rem);
  --tekst-m: clamp(1.0625rem, 1rem + 0.3vw, 1.125rem);
  --tekst-meny: clamp(1.125rem, 1.05rem + 0.35vw, 1.25rem); /* serif body on the menu, a step larger */
  --tekst-l: clamp(1.35rem, 1.15rem + 0.9vw, 1.9rem);
  --tekst-xl: clamp(2rem, 1.4rem + 2.6vw, 3.6rem);
  --tekst-xxl: clamp(2.6rem, 1.6rem + 4.6vw, 5.4rem);
  --tekst-merke: clamp(2.5rem, 1rem + 7.4vw, 8rem); /* the wordmark, capitals so smaller than a lowercase mark */

  /* rhythm: tight, sections meet on hard edges */
  --rom-s: clamp(1rem, 2vw, 1.5rem);
  --rom-m: clamp(1.7rem, 3.2vw, 2.8rem);
  --rom-l: clamp(2.75rem, 5.5vw, 5rem);
  --marg: clamp(1.25rem, 4vw, 4rem);
  --maks: 1360px;
  --nav-h: 72px;

  /* motion */
  --ease-ut: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-flip: cubic-bezier(0.7, 0, 0.2, 1);

  /* radius: crisp, not pillowy */
  --radius-s: 4px;
  --radius-m: 8px;
  --radius-l: 12px;
}