/* Pete's Place — design-system tokens (from the Pete's Place website project)
   and their mapping onto the shared app's --app-* variables. Cream paper,
   pour-gold buttons with ink text, brick-red kickers, stout-black header,
   Bebas Neue signage. */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Hanken+Grotesk:wght@400;500;600;700;800&display=swap');

:root {
  --ink-900: #1B1612; --ink-800: #2A231D; --ink-700: #3C322A; --ink-600: #54483D; --ink-500: #6E6052;
  --ink-300: #A89A89; --ink-200: #CBBFAE;
  --paper-50: #FCF8F0; --paper-100: #F8F1E4; --paper-200: #F0E6D2; --paper-300: #E4D6BC;
  --stout-950: #110D0A; --stout-900: #17120D; --stout-800: #221B14;
  --gold-700: #8A5E18; --gold-600: #A6741F; --gold-500: #C68A2A; --gold-400: #DDA63E; --gold-100: #FBEDCB;
  --brick-600: #97311F; --brick-500: #B43E2C;
  --pine-500: #44735A;
  --foam: #F6EAD0;

  --app-page: var(--paper-200);
  --app-bg: var(--paper-100);
  --app-bg-deep: var(--paper-200);
  --app-raised: var(--paper-200);
  --app-card: #FFFFFF;
  --app-hover: var(--paper-200);
  --app-input-bg: #FFFFFF;
  --app-line-subtle: rgba(0,0,0,0.08);
  --app-line: var(--paper-300);
  --app-line-strong: var(--ink-200);
  --app-slot-full: var(--ink-300);

  --app-text-strong: var(--ink-900);
  --app-text: var(--ink-800);
  --app-text-muted: var(--ink-600);
  --app-text-subtle: var(--ink-500);
  --app-placeholder: var(--ink-300);

  --app-accent: var(--gold-500);
  --app-accent-hover: var(--gold-400);
  --app-accent-press: var(--gold-600);
  --app-accent-tint: var(--gold-100);
  --app-accent-text: var(--brick-500);
  --app-on-accent: var(--ink-900);
  --app-kicker: var(--brick-500);

  --app-header-bg: var(--stout-900);
  --app-header-text: var(--foam);
  --app-header-muted: #C9BBA2;
  --app-header-line: #342A20;
  --app-header-kicker: var(--gold-400);
  --app-header-accent: var(--gold-400);
  --app-chipbar-bg: rgba(248,241,228,0.95);
  --app-bar-bg: rgba(252,248,240,0.96);
  --app-overlay-btn: rgba(17,13,10,0.6);
  --app-backdrop: rgba(17,13,10,0.55);
  --app-disabled-bg: var(--paper-200);
  --app-disabled-text: var(--ink-300);
  --app-badge-bg: var(--ink-900);
  --app-badge-text: var(--foam);
  --app-toast-bg: var(--stout-900);
  --app-toast-text: var(--foam);
  --app-tile-bg: var(--stout-900);
  --app-tile-text: var(--foam);
  --app-hero-text: var(--foam);
  --app-success: var(--pine-500);
  --app-danger: var(--brick-500);

  --app-font-display: 'Bebas Neue', 'Oswald', 'Arial Narrow', sans-serif;
  --app-font-body: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --app-display-weight: 400;
  --app-display-case: uppercase;
  --app-display-tracking: 0.02em;

  --app-radius: 10px;
  --app-radius-sheet: 16px;
  --app-shadow-sm: 0 2px 6px rgba(38,26,14,0.10);
  --app-shadow-md: 0 6px 18px rgba(38,26,14,0.10);
  --app-shadow-lg: 0 16px 40px rgba(38,26,14,0.18);
  --app-shadow-accent: 0 6px 18px rgba(166,116,31,0.28);
  --app-focus: 0 0 0 3px color-mix(in oklab, var(--gold-500) 55%, transparent);
}