/* Purpose-ID: HOTEL-CSS-001 | Purpose: Define semantic light and dark design tokens shared by every hotel interface. */
:root {
  color-scheme: light;
  /* 01. Semantic colour roles — Light */
  --color-text: #10231d;
  --color-text-subtle: #28433a;
  --color-text-muted: #6c7b75;
  --color-border: #dfe7e2;
  --color-border-strong: #c8d5ce;
  --color-canvas: #f3f6f2;
  --color-surface: #ffffff;
  --color-surface-subtle: #f8faf7;
  --color-accent: #176c4b;
  --color-on-accent: #ffffff;
  --color-accent-strong: #0f5339;
  --color-success: var(--color-accent-strong);
  --color-accent-soft: #dff3e9;
  --color-mint: #8ae0b8;
  --color-info-soft: #e2eef8;
  --color-warning: #a96514;
  --color-warning-soft: #fbebcc;
  --color-danger: #9e3f51;
  --color-on-danger: #ffffff;
  --color-danger-soft: #fae2e7;
  /* 02. Typography */
  --font-sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-size-control: .8125rem;
  --font-size-sm: .875rem;
  --font-size-xs: .75rem;
  --font-serif: Georgia, "Times New Roman", serif;
  --font-mono: ui-monospace, "SFMono-Regular", Consolas, monospace;
  /* 03. Spacing scale */
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  /* 04. Shape, elevation and motion */
  --radius-control: 12px;
  --radius-panel: 20px;
  --radius-hero: 30px;
  --radius-round: 999px;
  --radius-md: var(--radius-control);
  --radius-lg: var(--radius-panel);
  --shadow-card: var(--shadow-panel);
  --shadow-panel: 0 8px 24px rgba(16, 35, 29, .06);
  --shadow-overlay: 0 28px 80px rgba(16, 35, 29, .13);
  --color-overlay: rgba(4, 19, 13, .58);
  --duration-fast: 160ms;
  --duration-normal: 220ms;
  --ease-standard: cubic-bezier(.2, .8, .2, 1);
  /* 05. Layout and interaction dimensions */
  --control-height: 44px;
  --control-height-primary: 56px;
  --radius-action: 16px;
  --control-height-small: 36px;
  --state-disabled-opacity: .55;
  --color-focus: var(--color-accent);
  --color-hover: var(--color-accent-soft);
  --z-sidebar: 50;
  --z-topbar: 30;
  --z-detail: 35;
  --z-toast: 10000;
  --layout-sidebar-width: 280px;
  --layout-sidebar-rail-width: 88px;
  --layout-topbar-height: 72px;
  --layout-content-max: 1540px;
  --layout-public-max: 1200px;
}

/* 06. Semantic colour roles — Dark */
html[data-theme="dark"] {
  color-scheme: dark;
  --color-text: #edf6f1;
  --color-text-subtle: #c8d8d0;
  --color-text-muted: #93a89d;
  --color-border: #294238;
  --color-border-strong: #3b574b;
  --color-canvas: #0b1713;
  --color-surface: #11231c;
  --color-surface-subtle: #162b23;
  --color-accent: #62d29e;
  --color-on-accent: #092a1d;
  --color-accent-strong: #8ae0b8;
  --color-accent-soft: #193e2f;
  --color-info-soft: #173344;
  --color-warning: #f0b665;
  --color-warning-soft: #3c2c17;
  --color-danger: #ef91a3;
  --color-on-danger: #2b1018;
  --color-danger-soft: #40212a;
  --shadow-panel: 0 8px 24px rgba(0, 0, 0, .2);
  --shadow-overlay: 0 28px 80px rgba(0, 0, 0, .35);
  --color-overlay: rgba(0, 8, 6, .72);
}

/* 07. Shell aliases resolve on .app-body, where tenant branding is selected.
   Never redeclare a fixed dark sidebar here: inherited semantic colours must
   resolve in both html themes. Brand variants supply hue, not theme brightness. */
.app-body {
  --shell-brand-color: #176c4b;
  --shell-sidebar-bg: color-mix(in srgb, var(--color-surface) 94%, var(--shell-brand-color));
  --shell-sidebar-text: var(--color-text);
  --shell-sidebar-muted: var(--color-text-subtle);
  --shell-sidebar-subtle: var(--color-text-muted);
  --shell-sidebar-active: color-mix(in srgb, var(--color-accent-soft) 80%, var(--shell-brand-color));
  --shell-sidebar-active-text: var(--color-text);
  --shell-sidebar-glow: var(--color-accent);
  --shell-sidebar-border: var(--color-border);
  --shell-sidebar-surface: var(--color-surface-subtle);
  --shell-sidebar-hover: var(--color-hover);
}
.app-body[data-brand-theme="navy"] { --shell-brand-color: #416b9c; }
.app-body[data-brand-theme="burgundy"] { --shell-brand-color: #984763; }
.app-body[data-brand-theme="graphite"] { --shell-brand-color: #607c71; }