@import 'tailwindcss';
@import '@fontsource-variable/inter';
@import '@fontsource-variable/playfair-display';

/*
 * The Great Bear — "Industrial Hospitality" design system
 * Tokens ported 1:1 from the Stitch design (design/industrial_hospitality/DESIGN.md).
 */
@theme {
  /* ---- Colors (Material 3 dark palette) ---- */
  --color-surface: #1a120b;
  --color-surface-dim: #1a120b;
  --color-surface-bright: #42372f;
  --color-surface-container-lowest: #150c06;
  --color-surface-container-low: #231a13;
  --color-surface-container: #271e16;
  --color-surface-container-high: #322820;
  --color-surface-container-highest: #3e332b;
  --color-surface-variant: #3e332b;
  --color-surface-tint: #ffb77d;
  --color-on-surface: #f2dfd3;
  --color-on-surface-variant: #dbc2b0;
  --color-inverse-surface: #f2dfd3;
  --color-inverse-on-surface: #392e26;
  --color-inverse-primary: #904d00;
  --color-background: #1a120b;
  --color-on-background: #f2dfd3;
  --color-outline: #a38c7c;
  --color-outline-variant: #554336;
  --color-primary: #ffb77d;
  --color-on-primary: #4d2600;
  --color-primary-container: #d97707;
  --color-on-primary-container: #432100;
  --color-secondary: #ffb68e;
  --color-on-secondary: #532200;
  --color-secondary-container: #ab4c00;
  --color-on-secondary-container: #ffe2d5;
  --color-tertiary: #96ccff;
  --color-on-tertiary: #003353;
  --color-tertiary-container: #0297e8;
  --color-on-tertiary-container: #002c48;
  --color-error: #ffb4ab;
  --color-on-error: #690005;
  --color-error-container: #93000a;
  --color-on-error-container: #ffdad6;
  --color-primary-fixed: #ffdcc3;
  --color-primary-fixed-dim: #ffb77d;
  --color-on-primary-fixed: #2f1500;
  --color-on-primary-fixed-variant: #6e3900;
  --color-secondary-fixed: #ffdbca;
  --color-secondary-fixed-dim: #ffb68e;
  --color-on-secondary-fixed: #331200;
  --color-on-secondary-fixed-variant: #763300;
  --color-tertiary-fixed: #cee5ff;
  --color-tertiary-fixed-dim: #96ccff;
  --color-on-tertiary-fixed: #001d32;
  --color-on-tertiary-fixed-variant: #004a75;

  /* ---- Typography ---- */
  --font-headline-xl: 'Playfair Display Variable', 'Playfair Display', Georgia, serif;
  --font-headline-lg: 'Playfair Display Variable', 'Playfair Display', Georgia, serif;
  --font-headline-md: 'Playfair Display Variable', 'Playfair Display', Georgia, serif;
  --font-body: 'Inter Variable', 'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-body-lg: 'Inter Variable', 'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-body-md: 'Inter Variable', 'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-body-sm: 'Inter Variable', 'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-label-lg: 'Inter Variable', 'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-label-md: 'Inter Variable', 'Inter', ui-sans-serif, system-ui, sans-serif;

  --text-headline-xl: 48px;
  --text-headline-xl--line-height: 56px;
  --text-headline-xl--letter-spacing: -0.02em;
  --text-headline-xl--font-weight: 700;
  --text-headline-lg: 36px;
  --text-headline-lg--line-height: 44px;
  --text-headline-lg--letter-spacing: -0.01em;
  --text-headline-lg--font-weight: 600;
  --text-headline-md: 24px;
  --text-headline-md--line-height: 32px;
  --text-headline-md--font-weight: 600;
  --text-body-lg: 18px;
  --text-body-lg--line-height: 28px;
  --text-body-md: 16px;
  --text-body-md--line-height: 24px;
  --text-body-sm: 14px;
  --text-body-sm--line-height: 20px;
  --text-label-lg: 14px;
  --text-label-lg--line-height: 20px;
  --text-label-lg--letter-spacing: 0.05em;
  --text-label-lg--font-weight: 500;
  --text-label-md: 12px;
  --text-label-md--line-height: 16px;
  --text-label-md--letter-spacing: 0.05em;
  --text-label-md--font-weight: 500;

  /* ---- Spacing ---- */
  --spacing-space-xs: 0.25rem;
  --spacing-space-sm: 0.5rem;
  --spacing-space-md: 1rem;
  --spacing-space-lg: 2rem;
  --spacing-space-xl: 4rem;
  --spacing-space-2xl: 6rem;
  --spacing-grid-margin: 2rem;
  --spacing-grid-gutter: 1.5rem;

  /* ---- Radius (Stitch scale) ---- */
  --radius-sm: 0.125rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.25rem;
  --radius-xl: 0.5rem;
  --radius-2xl: 1rem;
  --radius-3xl: 1.5rem;
  --radius-full: 0.75rem;
}

@layer base {
  html,
  body {
    margin: 0;
    padding: 0;
  }

  body {
    @apply bg-surface font-body text-on-surface antialiased;
  }
}

/* Sticky menu filter bar on the Menu page scrolls horizontally without a scrollbar */
@utility no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;

  &::-webkit-scrollbar {
    display: none;
  }
}

/* Material Symbols Outlined — self-hosted, no external font CDN at runtime */
@font-face {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  font-weight: 100 700;
  font-display: block;
  src: url('/fonts/material-symbols-outlined.woff2') format('woff2');
}

.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  font-variation-settings:
    'FILL' 0,
    'wght' 400,
    'GRAD' 0,
    'opsz' 24;
  -webkit-font-smoothing: antialiased;
}
