/* All files share this order; selector specificity stays inside each layer. */
@layer base, theme, field, flow, fonts, interface, creation;
html { font-size: 100%; }

:root {
  --fs-xs: .75rem;
  --fs-sm: .875rem;
  --fs-md: 1rem;
  --fs-lg: 1.25rem;
  --sans: "Yi Sun Shin", "Malgun Gothic", "Apple SD Gothic Neo", system-ui, "Galmuri Korean", "Ark Pixel", sans-serif;
  --display: "Chosun Centennial", "Yi Sun Shin", serif;
  --pixel: "Ark Pixel", "Galmuri Korean", monospace;
  --serif: "Yi Sun Shin", "Malgun Gothic", "Apple SD Gothic Neo", system-ui, "Galmuri Korean", "Ark Pixel", sans-serif;
  --surface: #eee2c4;
  --surface-sunken: #cbbd9a;
  --text: #342b20;
  --muted: #675640;
  --accent: #813c2b;
  --gold: #7a5e2e;
  --line: #b29b6c;
  --heading: #302c24;
  --heading-bg: linear-gradient(#454737, #2c3128);
  --heading-text: #ead6a5;
  --heading-muted: #d6c5a1;
  --button-bg: #e4d3ad;
  --button-text: #45321f;
  --button-hover: #d6bf91;
  --primary-bg: #813c2b;
  --primary-text: #fff0c9;
  --primary-hover: #9a4933;
  --danger-bg: #eee0c4;
  --danger-text: #87382d;
  --danger-hover: #dfc8a9;
  --chrome-bg: #292e26;
  --chrome-text: #e4d4ae;
  --chrome-muted: #c8b890;
  --chrome-line: #8c7850;
  --chrome-danger: #f3b7a0;
  --chrome-danger-line: #ab6d56;
  --brand-gold: #e9d4a0;
  --seal-bg: #783a2b;
  --seal-border: #c68a62;
  --seal-text: #f4d5aa;
  --page-bg: radial-gradient(ellipse at top, #4a4a3b, #232721 65%);
  --header-bg: linear-gradient(90deg, #252b26ef, #33382bef);
  --intro-bg: radial-gradient(ellipse at top left, #f4e6c9cc, #d4c19de6);
  --overlay: #171c18b8;
  --shadow: #0005;
  --shadow-soft: #24251c22;
  --focus: #9f5e45;
  --warning-text: #744c20;
  --warning-bright: #ffd08b;
  --meter-health: linear-gradient(90deg, #793a2c, #bf7252);
  --meter-qi: linear-gradient(90deg, #355c57, #7ea591);
  --meter-exp: linear-gradient(90deg, #88713a, #c5a764);
  /* Legacy style.css consumers; new rules use --line and --text. */
  --edge: var(--line);
  --ink: var(--text);
  --map-filter: none;
  --map-clue: #ae934e;
  --region-sky: #cfdbc5;
  --region-far: #9fb5a2;
  --region-ground: #7e9c68;
  --region-light: #f1e1aa;
  --region-water: #83b0ad;
  --region-chasm: #3d646d;
  --region-falls: #c0d8c9;
  --region-mist: #d9e3d1;
  --z-hud: 10;
  --z-feedback: 20;
  --z-tabs: 100;
  --z-menu: 120;
  --z-dialog: 200;
  --z-toast: 300;
  --z-skip: 400;
  --z-critical: 500;
}

html[data-theme="night"] {
  color-scheme: dark;
  --surface: #302e27;
  --surface-sunken: #454035;
  --text: #ede1c2;
  --muted: #c1b69a;
  --accent: #e3be8e;
  --gold: #e5c381;
  --line: #766344;
  --heading: #e7d3a1;
  --button-bg: #454035;
  --button-text: #ede1c2;
  --button-hover: #5b503c;
  --primary-bg: #9b5039;
  --primary-text: #fff0cf;
  --primary-hover: #b35f43;
  --danger-bg: #49332b;
  --danger-text: #f2c3ac;
  --danger-hover: #614030;
  --intro-bg: radial-gradient(ellipse at top left, #403b30, #292e26);
  --page-bg: radial-gradient(ellipse at top, #302e27, #191d19 65%);
  --chrome-bg: #20251f;
  --chrome-text: #ede1c2;
  --chrome-muted: #c1b69a;
  --chrome-line: #a08a60;
  --meter-health: linear-gradient(90deg, #b56850, #e29b76);
  --meter-qi: linear-gradient(90deg, #71988e, #a9ccaf);
  --meter-exp: linear-gradient(90deg, #b09755, #e1c783);
  --warning-text: #ffd08b;
  --focus: #e3be8e;
  --map-filter: brightness(.79) saturate(.7);
  --map-clue: #dcc47e;
  --region-sky: #253d4b;
  --region-far: #3c5860;
  --region-ground: #344d43;
  --region-light: #c7d5b0;
  --region-water: #537983;
  --region-chasm: #243a43;
  --region-falls: #82a5a5;
  --region-mist: #8da6a2;
}