:root{
  /* ---- Base palette (named) ---- */
  --c-2am-black: #0D0E11;      /* base canvas — the room at 2am */
  --c-wet-asphalt: #23262E;    /* surfaces, cards, steel counter */
  --c-neon-amber: #FFB454;     /* primary accent, glow, CTAs */
  --c-diner-teal: #3FC1B0;     /* secondary neon */
  --c-cherry-vinyl: #A62633;   /* hot accent, sparing */
  --c-chrome: #C9CFD6;         /* text on dark, trim */

  /* ---- Extended neutrals (derived, do not invent more) ---- */
  --c-blackout: #08090B;       /* deeper than base: sticky footers, wells, video mats */
  --c-asphalt-raised: #2E323C; /* raised surface / hover on cards */
  --c-asphalt-line: #383D47;   /* visible divider on dark */
  --c-smoke: #8B929E;          /* muted / secondary text */
  --c-slate: #565D69;          /* disabled text, placeholder */
  --c-chrome-bright: #EDF0F3;  /* headline chrome, max contrast */

  /* ---- Accent tints (for washes + strokes only) ---- */
  --c-amber-12: rgba(255,180,84,0.12);
  --c-amber-24: rgba(255,180,84,0.24);
  --c-amber-40: rgba(255,180,84,0.40);
  --c-teal-12: rgba(63,193,176,0.12);
  --c-teal-32: rgba(63,193,176,0.32);
  --c-cherry-16: rgba(166,38,51,0.16);
  --c-chrome-08: rgba(201,207,214,0.08);
  --c-chrome-14: rgba(201,207,214,0.14);
  --c-chrome-24: rgba(201,207,214,0.24);

  /* ---- Semantic: surfaces ---- */
  --surface-base: var(--c-2am-black);
  --surface-sunken: var(--c-blackout);
  --surface-card: var(--c-wet-asphalt);
  --surface-raised: var(--c-asphalt-raised);
  --surface-inverse: var(--c-chrome-bright);
  --surface-amber-wash: var(--c-amber-12);
  --surface-teal-wash: var(--c-teal-12);
  --surface-scrim: rgba(8,9,11,0.78);

  /* ---- Semantic: text ---- */
  --text-primary: var(--c-chrome);
  --text-loud: var(--c-chrome-bright);
  --text-muted: var(--c-smoke);
  --text-disabled: var(--c-slate);
  --text-accent: var(--c-neon-amber);
  --text-secondary-accent: var(--c-diner-teal);
  --text-on-accent: var(--c-2am-black);
  --text-on-inverse: var(--c-2am-black);

  /* ---- Semantic: lines ---- */
  --border-hairline: var(--c-chrome-14);
  --border-strong: var(--c-asphalt-line);
  --border-accent: var(--c-amber-40);
  --border-focus: var(--c-diner-teal);

  /* ---- Semantic: actions ---- */
  --action-primary-bg: var(--c-neon-amber);
  --action-primary-bg-hover: #FFC77E;
  --action-primary-bg-active: #F0A23C;
  --action-primary-fg: var(--c-2am-black);
  --action-secondary-fg: var(--c-chrome);
  --action-danger-bg: var(--c-cherry-vinyl);
  --action-danger-fg: var(--c-chrome-bright);

  /* ---- Semantic: status (deadpan, not cheerful) ---- */
  --status-open: var(--c-diner-teal);
  --status-closed: var(--c-slate);
  --status-alert: var(--c-cherry-vinyl);
  --status-attention: var(--c-neon-amber);
}
:root{
  /* ---- Families ---- */
  --font-display: "Big Shoulders Display", "Oswald", "Arial Narrow", sans-serif;
  --font-body: "Space Grotesk", "Helvetica Neue", Helvetica, sans-serif;

  /* ---- Weights ---- */
  --weight-display: 800;
  --weight-display-max: 900;
  --weight-body: 400;
  --weight-body-medium: 500;
  --weight-body-bold: 700;

  /* ---- Display scale (always uppercase, tight tracking) ---- */
  --type-marquee: 132px;   /* one per page, hero only */
  --type-display-1: 88px;
  --type-display-2: 64px;
  --type-display-3: 44px;
  --type-display-4: 32px;

  /* ---- Body scale ---- */
  --type-lead: 21px;
  --type-body: 17px;
  --type-body-sm: 15px;
  --type-caption: 13px;
  --type-micro: 11px;

  /* ---- Line heights ---- */
  --leading-display: 0.88;
  --leading-display-loose: 0.96;
  --leading-body: 1.5;
  --leading-tight: 1.25;

  /* ---- Tracking ---- */
  --tracking-display: -0.02em;
  --tracking-body: 0;
  --tracking-label: 0.14em;   /* micro caps labels: HOURS, ORDER, SOLD OUT */
  --tracking-wide: 0.24em;    /* neon strip / marquee kickers */

  /* ---- Prices and numerals ---- */
  --numerals-tabular: "tnum" 1, "lnum" 1; /* @kind other */
}
:root{
  --space-0: 0px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 40px;
  --space-8: 56px;
  --space-9: 80px;
  --space-10: 120px;
  --space-11: 160px;

  /* Layout */
  --gutter: var(--space-5);
  --page-pad-x: var(--space-6);
  --page-pad-x-wide: var(--space-9);
  --section-pad-y: var(--space-10);
  --content-max: 1240px;
  --measure: 62ch;         /* body copy max line length */
  --measure-narrow: 42ch;
  --control-h-sm: 34px;
  --control-h: 44px;       /* default hit target, never smaller */
  --control-h-lg: 54px;
  --nav-h: 68px;
}
:root{
  /* Steel and neon: corners stay near-square. Nothing is soft here. */
  --radius-0: 0px;         /* default for panels, images, marquees */
  --radius-1: 2px;         /* inputs, chips, small controls */
  --radius-2: 4px;         /* cards, dialogs */
  --radius-pill: 999px;    /* status dots, tag pills only */
  --border-w: 1px;
  --border-w-thick: 2px;   /* neon strokes, focus */
}
:root{
  /* Late-night pacing: things fade and slide a little. Nothing bounces. */
  --ease-standard: cubic-bezier(0.22, 0.61, 0.36, 1); /* @kind other */
  --ease-out-soft: cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --ease-in: cubic-bezier(0.4, 0, 1, 1); /* @kind other */
  --dur-1: 90ms; /* @kind other */    /* press feedback */
  --dur-2: 160ms; /* @kind other */   /* hover, color */
  --dur-3: 260ms; /* @kind other */   /* enter, reveal */
  --dur-4: 420ms; /* @kind other */   /* overlay, marquee cross-fade */
  --lift-hover: -1px; /* @kind spacing */
  --press-scale: 0.985; /* @kind other */
  --flicker-period: 6s; /* @kind other */ /* neon flicker accent — one element per screen, at most */
}
:root{
  /* No soft drop shadows on dark — depth comes from value steps + hairlines.
     Shadows are used only to seat floating layers, glows to signal live neon. */
  --shadow-seat: 0 1px 0 rgba(8,9,11,0.9);
  --shadow-layer: 0 24px 64px rgba(8,9,11,0.72);
  --shadow-dialog: 0 40px 120px rgba(8,9,11,0.85);

  /* Glow: max ONE amber glow moment per viewport. */
  --glow-amber: 0 0 0 1px var(--c-amber-40), 0 0 28px rgba(255,180,84,0.34);
  --glow-amber-soft: 0 0 32px rgba(255,180,84,0.22);
  --glow-teal: 0 0 0 1px var(--c-teal-32), 0 0 24px rgba(63,193,176,0.28);
  --glow-text-amber: 0 0 18px rgba(255,180,84,0.55);
  --glow-text-teal: 0 0 18px rgba(63,193,176,0.45);

  /* Environment */
  --vignette: radial-gradient(120% 90% at 50% 0%, rgba(255,180,84,0.10) 0%, rgba(13,14,17,0) 62%); /* @kind other */
  --scrim-bottom: linear-gradient(to top, rgba(8,9,11,0.96) 0%, rgba(8,9,11,0.72) 42%, rgba(8,9,11,0) 100%); /* @kind other */
  --scrim-top: linear-gradient(to bottom, rgba(8,9,11,0.92) 0%, rgba(8,9,11,0) 100%); /* @kind other */
  --blur-glass: blur(14px) saturate(120%); /* @kind other */
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--surface-base);color:var(--text-primary);font-family:var(--font-body);font-size:var(--type-body);font-weight:var(--weight-body);line-height:var(--leading-body);letter-spacing:var(--tracking-body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:var(--weight-display);text-transform:uppercase;letter-spacing:var(--tracking-display);line-height:var(--leading-display);color:var(--text-loud);margin:0}
h1{font-size:var(--type-display-1)}
h2{font-size:var(--type-display-2)}
h3{font-size:var(--type-display-3)}
h4{font-size:var(--type-display-4)}
p{margin:0;text-wrap:pretty}
a{color:var(--text-accent);text-decoration:none;border-bottom:1px solid var(--c-amber-40);transition:color var(--dur-2) var(--ease-standard),border-color var(--dur-2) var(--ease-standard)}
a:hover{color:var(--c-chrome-bright);border-bottom-color:var(--c-chrome-bright)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:var(--border-w-thick) solid var(--border-focus);outline-offset:2px}
img{display:block;max-width:100%}
::selection{background:var(--c-neon-amber);color:var(--c-2am-black)}
::placeholder{color:var(--text-disabled)}
.dn-label{font-family:var(--font-body);font-size:var(--type-micro);font-weight:var(--weight-body-bold);text-transform:uppercase;letter-spacing:var(--tracking-label);color:var(--text-muted)}
.dn-price{font-variant-numeric:tabular-nums lining-nums;font-weight:var(--weight-body-medium)}
.dn-measure{max-width:var(--measure)}
@media (prefers-reduced-motion:reduce){*{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important}}