/* NIGHTJAR tokens: the single source of truth. Re-skin here first. */

@font-face {
  font-family: "Playfair Display";
  src: url("../fonts/playfair-display-italic-var.woff2") format("woff2");
  font-weight: 400 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Playfair Display";
  src: url("../fonts/playfair-display-var.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Assistant";
  src: url("../fonts/assistant-var.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

:root {
  /* primitives: the room after dark. Some steps are intentionally unused
     on the demo pages; the scale leaves room for re-skins to move. */
  --dark: #10201b;        /* after-dark green: the walls */
  --dark-2: #16291f;      /* the booth shadow */
  --dark-3: #1d332a;      /* the leather */
  --ivory: #f2e9d8;       /* candle ivory: the light */
  --ivory-2: #e9dcc4;     /* the menu paper */
  --ivory-3: #ddccae;     /* the coaster edge */
  --amaro: #ce7a70;       /* bright, dusty: 5.34 on --dark, 4.84 on --dark-2 */
  --amaro-deep: #782b1e;  /* deep, bitter: 8.06 on --ivory, 7.17 on --ivory-2 */
  --amaro-glow-1: rgba(206, 122, 112, 0.17); /* the lamp over the hero */
  --amaro-glow-2: rgba(206, 122, 112, 0.08); /* its far throw */

  /* semantic (the room is the default theme) */
  --bg: var(--dark);
  --bg-2: var(--dark-2);
  --fg: var(--ivory);
  --muted: #a7b3a7;
  --line: rgba(242, 233, 216, 0.16);
  --line-strong: rgba(242, 233, 216, 0.52);
  --accent: var(--amaro);
  --accent-raw: var(--amaro);
  --focus: #e9a79c;

  /* type */
  --font-display: "Playfair Display", Didot, "Times New Roman", serif;
  --font-body: "Assistant", "Helvetica Neue", Arial, sans-serif;
  --t-display: clamp(2.8rem, 10vw, 8.5rem);
  --t-h1: clamp(2.4rem, 6vw, 5rem);
  --t-h2: clamp(1.9rem, 4vw, 3.25rem);
  --t-h3: clamp(1.3rem, 2.2vw, 1.85rem);
  --t-lead: clamp(1.15rem, 1.7vw, 1.45rem);
  --t-body: 1.0625rem;
  --t-small: 0.9rem;
  --t-note: 0.75rem;
  --lh-tight: 1;
  --lh-heading: 1.08;
  --lh-body: 1.6;
  --track-note: 0.16em;

  /* space */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;
  --s-10: 9rem;
  --section-pad: clamp(5rem, 12vh, 9rem);
  --gutter: clamp(1rem, 2.5vw, 1.5rem);
  --edge: clamp(1.25rem, 4vw, 4rem);
  --measure: 36rem;
  --max-w: 74rem;

  /* shape + depth */
  --r-1: 3px;
  --r-2: 8px;
  --r-3: 18px;
  --r-pill: 999px;
  --shadow-candle: 0 1px 2px rgba(6, 12, 10, 0.35), 0 14px 40px rgba(6, 12, 10, 0.35);

  /* motion */
  --dur-1: 150ms;
  --dur-2: 320ms;
  --dur-3: 620ms;
  --dur-4: 1100ms;
  --ease-out: cubic-bezier(0.19, 1, 0.22, 1);
  --ease-inout: cubic-bezier(0.83, 0, 0.17, 1);

  /* layers */
  --z-header: 40;
  --z-menu: 50;
  --z-skip: 60;
}

/* menu-paper theme: any wrapper with data-theme="paper" flips the semantics,
   the way a candle catches the printed list. */
[data-theme="paper"] {
  --bg: var(--ivory);
  --bg-2: var(--ivory-2);
  --fg: #182720;
  --muted: #55604f;
  --line: rgba(16, 32, 27, 0.18);
  --line-strong: rgba(16, 32, 27, 0.55);
  --accent: var(--amaro-deep);
  --focus: var(--amaro-deep);
}