/*
 * HealthyPour — Back Bar design system.
 * Tokens, fonts and base element styles. Ported from docs/design/design-system-back-bar.html.
 * Component and layout styles live in components.css and layout.css.
 */

/* ============================================================
   FONTS (self-hosted; resolved & fingerprinted by Propshaft)
   ============================================================ */
@font-face {
  font-family: 'Fraunces';
  font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("/assets/Fraunces-normal-400_700-2b4cdb3a.woff2") format("woff2");
}
@font-face {
  font-family: 'Fraunces';
  font-style: italic; font-weight: 500; font-display: swap;
  src: url("/assets/Fraunces-italic-500-be83d7b2.woff2") format("woff2");
}
@font-face {
  font-family: 'Archivo';
  font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("/assets/Archivo-normal-400_700-7a918f31.woff2") format("woff2");
}
@font-face {
  font-family: 'Space Mono';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url("/assets/SpaceMono-normal-400-2fb0d22d.woff2") format("woff2");
}
@font-face {
  font-family: 'Space Mono';
  font-style: normal; font-weight: 700; font-display: swap;
  src: url("/assets/SpaceMono-normal-700-27e084bd.woff2") format("woff2");
}

/* ============================================================
   TOKENS
   ============================================================ */
:root {
  --char-50:#F7F7F8; --char-100:#EAEBEB; --char-200:#D1D4D6; --char-300:#B4B9BB;
  --char-400:#949B9E; --char-500:#6F777B; --char-600:#52585B; --char-700:#3A3E40;
  --char-800:#242728; --char-900:#141515; --void:#0B0C0C;

  --verdant-50:#ECF4ED; --verdant-100:#D2E4D6; --verdant-200:#97D8A4; --verdant-300:#60C875;
  --verdant-400:#3DAE53; --verdant-500:#329045; --verdant-600:#297037; --verdant-700:#1E5229;
  --verdant-800:#15381C; --verdant-900:#111D13;

  --amethyst-50:#F4EFF5; --amethyst-100:#E3D9E7; --amethyst-200:#CDA8DC; --amethyst-300:#B377CA;
  --amethyst-400:#9C4FBB; --amethyst-500:#803C9A; --amethyst-600:#633177; --amethyst-700:#4B255B;
  --amethyst-800:#33193E; --amethyst-900:#1C141F;

  --bitters-50:#F7EEEF; --bitters-100:#EBD6D9; --bitters-200:#E694A1; --bitters-300:#DB576D;
  --bitters-400:#D32C48; --bitters-500:#B1253D; --bitters-600:#8C2133; --bitters-700:#6B1927;
  --bitters-800:#461019; --bitters-900:#221114;

  --citrine-50:#F5F3EA; --citrine-100:#E9E2CE; --citrine-200:#E8D187; --citrine-300:#E2C050;
  --citrine-400:#DCB32D; --citrine-500:#C9A222; --citrine-600:#A6861C; --citrine-700:#7C6518;
  --citrine-800:#514210; --citrine-900:#272212;

  --curacao-50:#ECF1F3; --curacao-100:#D3DDE4; --curacao-200:#9DC2D7; --curacao-300:#6CA5C6;
  --curacao-400:#468CB4; --curacao-500:#397293; --curacao-600:#2F5B74; --curacao-700:#234457;
  --curacao-800:#182D3A; --curacao-900:#141B1F;

  --success-100:#D3E3DC; --success-300:#67C197; --success-600:#2B6449; --success-800:#1C2C24;

  --font-display:'Fraunces', 'Iowan Old Style', Georgia, serif;
  --font-body:'Archivo', -apple-system, 'Helvetica Neue', sans-serif;
  --font-mono:'Space Mono', 'SF Mono', Menlo, monospace;

  --fs-2xs:.6875rem; --fs-xs:.75rem; --fs-sm:.8125rem; --fs-base:.9375rem; --fs-md:1.0625rem;
  --fs-lg:1.25rem; --fs-xl:1.5rem; --fs-2xl:1.875rem; --fs-3xl:2.5rem; --fs-4xl:3.5rem;

  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px;
  --sp-8:32px; --sp-10:40px; --sp-12:48px; --sp-16:64px; --sp-20:80px;

  --r-xs:2px; --r-sm:4px; --r-md:6px; --r-lg:10px; --r-xl:22px; --r-full:999px;

  --ease-standard:cubic-bezier(.4,0,.2,1);
  --dur-fast:120ms; --dur-base:220ms; --dur-slow:340ms;

  color-scheme: light;
  --bg-page:var(--char-100); --bg-surface:var(--char-50); --bg-surface-2:var(--char-200);
  --bg-overlay:rgba(234,235,235,.93); --bg-rail:var(--char-50);
  --text-1:var(--char-900); --text-2:var(--char-600); --text-3:var(--char-500);
  --text-disabled:var(--char-300); --text-inverse:var(--char-50);
  --border-subtle:var(--char-200); --border-default:var(--char-300); --border-strong:var(--char-500);
  --border-brand:var(--verdant-600);
  --brand-primary:var(--verdant-600); --brand-primary-hover:var(--verdant-700); --brand-primary-tint:var(--verdant-50);
  --brand-secondary:var(--amethyst-600); --brand-secondary-hover:var(--amethyst-700); --brand-secondary-tint:var(--amethyst-50);
  --brand-tertiary:var(--bitters-600); --brand-tertiary-tint:var(--bitters-50);
  --rating-fill:var(--bitters-600); --rating-empty:var(--char-300);
  --success:var(--success-600); --success-bg:var(--success-100);
  --warning:var(--citrine-600); --warning-bg:var(--citrine-100);
  --error:var(--bitters-600); --error-bg:var(--bitters-100);
  --info:var(--curacao-600); --info-bg:var(--curacao-100);
  --sh-sm:0 1px 2px rgba(20,21,21,.10);
  --sh-md:0 6px 16px rgba(20,21,21,.12), 0 2px 6px rgba(20,21,21,.06);
  --sh-lg:0 16px 40px rgba(20,21,21,.16), 0 4px 12px rgba(20,21,21,.08);
  --grain-opacity:.04;
}

/* Dark theme: follow system, and honor an explicit toggle via data-theme. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg-page:var(--void); --bg-surface:var(--char-900); --bg-surface-2:var(--char-800);
    --bg-overlay:rgba(11,12,12,.94); --bg-rail:#0F1010;
    --text-1:var(--char-50); --text-2:var(--char-300); --text-3:var(--char-500);
    --text-disabled:var(--char-700); --text-inverse:var(--char-900);
    --border-subtle:var(--char-800); --border-default:var(--char-700); --border-strong:var(--char-600);
    --border-brand:var(--verdant-300);
    --brand-primary:var(--verdant-300); --brand-primary-hover:var(--verdant-200); --brand-primary-tint:var(--verdant-900);
    --brand-secondary:var(--amethyst-300); --brand-secondary-hover:var(--amethyst-200); --brand-secondary-tint:var(--amethyst-900);
    --brand-tertiary:var(--bitters-300); --brand-tertiary-tint:var(--bitters-900);
    --rating-fill:var(--bitters-300); --rating-empty:var(--char-700);
    --success:var(--success-300); --success-bg:var(--success-800);
    --warning:var(--citrine-300); --warning-bg:var(--citrine-800);
    --error:var(--bitters-300); --error-bg:var(--bitters-800);
    --info:var(--curacao-300); --info-bg:var(--curacao-800);
    --sh-sm:0 1px 2px rgba(0,0,0,.4);
    --sh-md:0 6px 20px rgba(0,0,0,.5), 0 2px 8px rgba(0,0,0,.35);
    --sh-lg:0 20px 48px rgba(0,0,0,.6), 0 6px 16px rgba(0,0,0,.4);
    --grain-opacity:.10;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg-page:var(--void); --bg-surface:var(--char-900); --bg-surface-2:var(--char-800);
  --bg-overlay:rgba(11,12,12,.94); --bg-rail:#0F1010;
  --text-1:var(--char-50); --text-2:var(--char-300); --text-3:var(--char-500);
  --text-disabled:var(--char-700); --text-inverse:var(--char-900);
  --border-subtle:var(--char-800); --border-default:var(--char-700); --border-strong:var(--char-600);
  --border-brand:var(--verdant-300);
  --brand-primary:var(--verdant-300); --brand-primary-hover:var(--verdant-200); --brand-primary-tint:var(--verdant-900);
  --brand-secondary:var(--amethyst-300); --brand-secondary-hover:var(--amethyst-200); --brand-secondary-tint:var(--amethyst-900);
  --brand-tertiary:var(--bitters-300); --brand-tertiary-tint:var(--bitters-900);
  --rating-fill:var(--bitters-300); --rating-empty:var(--char-700);
  --success:var(--success-300); --success-bg:var(--success-800);
  --warning:var(--citrine-300); --warning-bg:var(--citrine-800);
  --error:var(--bitters-300); --error-bg:var(--bitters-800);
  --info:var(--curacao-300); --info-bg:var(--curacao-800);
  --sh-sm:0 1px 2px rgba(0,0,0,.4);
  --sh-md:0 6px 20px rgba(0,0,0,.5), 0 2px 8px rgba(0,0,0,.35);
  --sh-lg:0 20px 48px rgba(0,0,0,.6), 0 6px 16px rgba(0,0,0,.4);
  --grain-opacity:.10;
}

/* ============================================================
   BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; color: var(--text-1); font-family: var(--font-body);
  font-size: var(--fs-base); line-height: 1.5; min-height: 100vh;
  background:
    radial-gradient(ellipse 900px 560px at 12% -8%, color-mix(in srgb, var(--brand-primary) 16%, transparent), transparent 60%),
    radial-gradient(ellipse 760px 520px at 104% 14%, color-mix(in srgb, var(--brand-secondary) 13%, transparent), transparent 55%),
    radial-gradient(ellipse 700px 480px at 30% 115%, color-mix(in srgb, var(--brand-tertiary) 10%, transparent), transparent 55%),
    var(--bg-page);
  background-attachment: fixed;
  transition: background var(--dur-base) var(--ease-standard), color var(--dur-base) var(--ease-standard);
}
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  opacity: var(--grain-opacity); mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; margin: 0; color: var(--text-1); text-wrap: balance; }
p { margin: 0; }
button { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
::selection { background: var(--brand-primary); color: var(--text-inverse); }
:focus-visible { outline: 2px solid var(--brand-secondary); outline-offset: 2px; border-radius: var(--r-xs); }
@media (prefers-reduced-motion: reduce) { * { animation-duration: .001ms !important; transition-duration: .001ms !important; } }

.eyebrow {
  font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-3); display: flex; align-items: center; gap: var(--sp-2);
}
.eyebrow::before { content: ""; width: 14px; height: 1px; background: var(--border-strong); }
code, .mono { font-family: var(--font-mono); }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }