/* LetsEat design tokens — the single source of truth for the palette.
   NOTE: the MudBlazor C# theme (Theme/LetsEatTheme.cs) mirrors these hex
   values because MudTheme is built in C# and cannot read CSS variables.
   Keep the two in sync — LetsEatThemePaletteSyncTests guards this. */

:root,
[data-theme="light"] {
  /* Primary as raw RGB channels so alpha overlays/glows can be derived
     with rgba(var(--primary-rgb), <a>) instead of hard-coding the coral. */
  --primary-rgb: 228, 87, 46;
  /* Chrome dimensions shared across layout + module pages (see MainLayout,
     LetsEatTheme AppbarHeight). */
  --topbar-height: 66px;

  /* Shared layout rhythm and radii. */
  --space-3: 12px;
  --space-4: 16px;
  --radius-lg: 15px;

  /* Stacking order — one ladder instead of scattered magic z-indexes. */
  --z-base: 1;
  --z-sticky-footer: 3;
  --z-sticky-header: 4;
  --z-raised: 5;
  --z-topbar: 20;
  --z-fab: 30;
  --z-error: 1000;
  --z-scrim: 1200;
  --z-drawer: 1201;
  --z-overlay: 9999;

  /* Type scale — the existing font sizes, centralised (theme-independent).
     Values are the sizes already in use; a future pass could round them. */
  --fs-2xs: 10.5px;
  --fs-xs: 11.5px;
  --fs-sm: 12.5px;
  --fs-md: 13.5px;
  --fs-lg: 14.5px;
  --fs-xl: 15.5px;

  /* White for text/icons on coloured media or dark overlays — intentionally
     theme-independent, unlike --on-primary. */
  --on-media: #FFFFFF;

  --canvas: #F5F0EA;
  --surface: #FFFFFF;
  --surface-2: #FBF6F0;
  --surface-3: #F1E9DF;
  --border: #EAE1D6;
  --border-strong: #DBCFC0;
  --text: #5A5049;
  --text-strong: #231D17;
  --text-muted: #978C7F;
  --primary: #E4572E;
  --primary-hover: #C8461F;
  --primary-tint: #FBE9E1;
  --on-primary: #FFFFFF;
  --green: #3E8E5A;
  --green-tint: #E6F1EA;
  --gold: #EBA033;
  --gold-tint: #FBEFD8;
  --gold-strong: #B77A1B;
  --info: #3B79C4;
  --info-tint: #E7F0F9;
  --danger: #CE4A2E;
  --danger-tint: #FBE7E1;
  --shadow-sm: 0 1px 2px rgba(60, 40, 20, .06);
  --shadow: 0 2px 4px rgba(60, 40, 20, .05), 0 10px 26px rgba(60, 40, 20, .07);
  --shadow-lg: 0 8px 40px rgba(60, 40, 20, .14);
  --primary-soft: rgba(228, 87, 46, .16);
  --scrim: rgba(245, 240, 234, .72);
  --glow: rgba(228, 87, 46, .32);
  --font-display: 'Bricolage Grotesque', sans-serif;
  --font-body: 'Instrument Sans', sans-serif;
}

[data-theme="dark"] {
  --primary-rgb: 242, 107, 65;
  --canvas: #14110E;
  --surface: #211C18;
  --surface-2: #28221D;
  --surface-3: #332B24;
  --border: #372F28;
  --border-strong: #463C33;
  --text: #D6CCC1;
  --text-strong: #F7F1EA;
  --text-muted: #9A8E80;
  --primary: #F26B41;
  --primary-hover: #FF7D55;
  --primary-tint: #3A241C;
  --on-primary: #1A0F09;
  --green: #5BB07C;
  --green-tint: #1E2C23;
  --gold: #E0A241;
  --gold-tint: #2E2416;
  --gold-strong: #E0A241;
  --info: #5C97D8;
  --info-tint: #1A2632;
  --danger: #E06549;
  --danger-tint: #2E1B15;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow: 0 2px 4px rgba(0, 0, 0, .4), 0 12px 30px rgba(0, 0, 0, .4);
  --shadow-lg: 0 10px 44px rgba(0, 0, 0, .55);
  --primary-soft: rgba(242, 107, 65, .20);
  --scrim: rgba(20, 17, 14, .72);
  --glow: rgba(242, 107, 65, .42);
}

[data-accent="green"] {
  --primary-rgb: 62, 142, 90;
  --primary: #3E8E5A;
  --primary-hover: #33774B;
  --primary-tint: #E6F1EA;
  --on-primary: #FFFFFF;
  --primary-soft: rgba(62, 142, 90, .16);
  --glow: rgba(62, 142, 90, .32);
}

[data-theme="dark"][data-accent="green"] {
  --primary-rgb: 91, 176, 124;
  --primary: #5BB07C;
  --primary-hover: #6EC48F;
  --primary-tint: #1E2C23;
  --on-primary: #0E1712;
  --primary-soft: rgba(91, 176, 124, .20);
  --glow: rgba(91, 176, 124, .42);
}

[data-accent="blueberry"] {
  --primary-rgb: 91, 87, 199;
  --primary: #5B57C7;
  --primary-hover: #4A47AD;
  --primary-tint: #EAE9F7;
  --on-primary: #FFFFFF;
  --primary-soft: rgba(91, 87, 199, .16);
  --glow: rgba(91, 87, 199, .32);
}

[data-theme="dark"][data-accent="blueberry"] {
  --primary-rgb: 132, 128, 238;
  --primary: #8480EE;
  --primary-hover: #9591FF;
  --primary-tint: #221F3A;
  --on-primary: #0D0B1A;
  --primary-soft: rgba(132, 128, 238, .20);
  --glow: rgba(132, 128, 238, .42);
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-body);
  background: var(--canvas);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a {
  color: var(--primary);
  text-decoration: none;
}

a:hover {
  color: var(--primary-hover);
}

::-webkit-scrollbar {
  height: 10px;
  width: 10px;
}

::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: 20px;
  border: 2px solid transparent;
  background-clip: content-box;
}

::-webkit-scrollbar-track {
  background: transparent;
}

.material-symbols-rounded {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.material-symbols-rounded.filled {
  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}