/* Old Towne Pub design tokens.
   Palette is extracted from the pub's own brand: the OTP seal red sampled at
   #b03818, aged cream lettering, dark carved walnut and exposed 1898 brick.
   Dark is the showcase theme; light is the aged-menu-paper theme.
   Every value here is proven by _contrast.mjs (see notes.md for the matrix). */

:root {
  /* Type */
  --font-display: "Bebas Neue", "Arial Narrow", sans-serif;
  --font-body: "Libre Baskerville", Georgia, "Times New Roman", serif;
  --font-ui: "Barlow", "Helvetica Neue", Arial, sans-serif;

  --step--1: clamp(0.82rem, 0.79rem + 0.14vw, 0.9rem);
  --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.09rem);
  --step-1: clamp(1.15rem, 1.08rem + 0.35vw, 1.35rem);
  --step-2: clamp(1.5rem, 1.3rem + 1vw, 2.1rem);
  --step-3: clamp(2rem, 1.6rem + 2vw, 3.1rem);
  --step-4: clamp(2.6rem, 1.9rem + 3.4vw, 4.6rem);
  --step-5: clamp(3rem, 2rem + 5vw, 6.2rem);

  /* One spacing scale */
  --sp-1: 0.375rem;
  --sp-2: 0.75rem;
  --sp-3: 1.125rem;
  --sp-4: 1.75rem;
  --sp-5: 2.5rem;
  --sp-6: 3.5rem;
  --sp-7: 5rem;
  --sp-8: 7rem;

  --wrap: 1200px;
  --wrap-narrow: 780px;
  --gutter: clamp(1.25rem, 4vw, 3rem);

  /* Shape: one radius system. Pub signage is squared off, so we stay square
     except for pill-shaped interactive controls. */
  --radius-0: 0px;
  --radius-pill: 999px;
  --border-w: 1px;

  --dur: 420ms;
  --ease: cubic-bezier(0.2, 0.7, 0.3, 1);

  /* Dark theme is the default and the showcase */
  --bg: #16110e;
  --bg-raised: #211a14;
  --bg-sunken: #0d0a08;
  --bg-plate: #000000; /* matches the seal artwork plate */

  --ink: #f4ecdc;
  --ink-muted: #cabda6;
  --ink-faint: #a99b85;

  --accent: #b03818; /* the seal red, fills only */
  --accent-hover: #bd3d19;
  --on-accent: #fff4e9;
  --accent-ink: #f08a63; /* red family at text size on dark */

  --brass: #c9a25e;
  --brass-ink: #dcb87b;

  --field-bg: #1c1611;
  --field-border: #93866c;
  --focus: #f0b46a;

  --hairline: rgba(201, 162, 94, 0.28);
  --hairline-strong: rgba(201, 162, 94, 0.5);
  --scrim-top: rgba(10, 7, 5, 0.35);
  --scrim-bottom: rgba(10, 7, 5, 0.93);
  --shadow: 0 18px 50px rgba(0, 0, 0, 0.55);

  color-scheme: dark;
}

@media (prefers-color-scheme: light) {
  :root {
    --bg: #f4ecdd;
    --bg-raised: #fdf8ee;
    --bg-sunken: #e8dcc6;
    --bg-plate: #16110e;

    --ink: #1d1610;
    --ink-muted: #574a3a;
    --ink-faint: #6b5c48;

    --accent: #9c2f11;
    --accent-hover: #872810;
    --on-accent: #fff4e9;
    --accent-ink: #932c10;

    --brass: #7a5c26;
    --brass-ink: #6d5222;

    --field-bg: #fffdf8;
    --field-border: #7d6f57;
    --focus: #8a5a12;

    --hairline: rgba(93, 70, 28, 0.3);
    --hairline-strong: rgba(93, 70, 28, 0.55);
    --scrim-top: rgba(10, 7, 5, 0.3);
    --scrim-bottom: rgba(10, 7, 5, 0.9);
    --shadow: 0 14px 40px rgba(60, 44, 20, 0.18);

    color-scheme: light;
  }
}