/* ============================================================================
   Design tokens — one source of truth for both the guest app and the panels.
   Light and dark are separate, deliberately chosen steps (not an auto-invert).
   Chart hues are validated for CVD separation against each surface.
   ========================================================================== */

:root {
  /* Typography */
  --font-sans: "Inter var", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, ui-serif, serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --text-2xs: 0.6875rem;
  --text-xs: 0.75rem;
  --text-sm: 0.8125rem;
  --text-base: 0.9375rem;
  --text-md: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;
  --text-2xl: 1.75rem;
  --text-3xl: 2.25rem;

  /* Spacing / geometry */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 56px;

  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-full: 999px;

  --header-height: 64px;
  --sidebar-width: 248px;
  --content-max: 1360px;

  --transition: 160ms cubic-bezier(0.2, 0.7, 0.3, 1);

  /* Brand — overridden per hotel at runtime */
  --brand: #0d6d66;
  --brand-strong: #0a544f;
  --brand-soft: #e3f2ef;
  --accent: #c9a227;
}

/* ------------------------------------------------------------------ light -- */
:root,
:root[data-theme="light"] {
  color-scheme: light;

  --canvas: #f4f6f5;
  --surface: #ffffff;
  --surface-raised: #ffffff;
  --surface-sunken: #eef1f0;
  --surface-inverse: #10201e;
  --overlay: rgba(12, 28, 26, 0.55);

  --ink: #0f1c1b;
  --ink-secondary: #46595a;
  --ink-muted: #6b7d7e;
  --ink-inverse: #f7fbfa;
  --ink-on-brand: #ffffff;

  --border: #dfe5e3;
  --border-strong: #c4cfcc;
  --border-focus: var(--brand);

  --shadow-xs: 0 1px 2px rgba(15, 32, 30, 0.06);
  --shadow-sm: 0 2px 6px rgba(15, 32, 30, 0.07);
  --shadow-md: 0 8px 24px rgba(15, 32, 30, 0.09);
  --shadow-lg: 0 24px 48px rgba(15, 32, 30, 0.16);

  /* Status */
  --good: #15803d;
  --good-soft: #e6f4ea;
  --warn: #b45309;
  --warn-soft: #fdf1e3;
  --serious: #be123c;
  --serious-soft: #fdeaee;
  --info: #4f46e5;
  --info-soft: #eceafd;
  --neutral-soft: #eef1f0;

  /* Charts (validated: light surface, categorical) */
  --chart-1: #0d9488;
  --chart-2: #b45309;
  --chart-3: #4f46e5;
  --chart-4: #be123c;
  --chart-grid: #e6eae9;
  --chart-axis: #8b9a99;
  --chart-fill-soft: rgba(13, 148, 136, 0.14);
}

/* ------------------------------------------------------------------- dark -- */
:root[data-theme="dark"] {
  color-scheme: dark;

  --canvas: #0e1413;
  --surface: #151c1b;
  --surface-raised: #1b2423;
  --surface-sunken: #101716;
  --surface-inverse: #f2f7f6;
  --overlay: rgba(4, 10, 9, 0.7);

  --ink: #eaf2f0;
  --ink-secondary: #b3c2c0;
  --ink-muted: #8b9c9a;
  --ink-inverse: #0f1c1b;
  --ink-on-brand: #ffffff;

  --border: #263230;
  --border-strong: #35433f;

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.45);
  --shadow-md: 0 10px 28px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 24px 56px rgba(0, 0, 0, 0.6);

  --brand: #2aa79b;
  --brand-strong: #43c0b3;
  --brand-soft: #12312e;
  --accent: #e0b83c;

  --good: #34a853;
  --good-soft: #12281b;
  --warn: #d97706;
  --warn-soft: #2c1d0c;
  --serious: #e1425f;
  --serious-soft: #2f1219;
  --info: #7c7bf5;
  --info-soft: #1b1a3a;
  --neutral-soft: #1e2726;

  /* Charts (validated: dark surface, categorical) */
  --chart-1: #0d9488;
  --chart-2: #d97706;
  --chart-3: #6366f1;
  --chart-4: #e11d48;
  --chart-grid: #232e2c;
  --chart-axis: #6f817f;
  --chart-fill-soft: rgba(13, 148, 136, 0.22);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --canvas: #0e1413;
    --surface: #151c1b;
    --surface-raised: #1b2423;
    --surface-sunken: #101716;
    --surface-inverse: #f2f7f6;
    --overlay: rgba(4, 10, 9, 0.7);

    --ink: #eaf2f0;
    --ink-secondary: #b3c2c0;
    --ink-muted: #8b9c9a;
    --ink-inverse: #0f1c1b;

    --border: #263230;
    --border-strong: #35433f;

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.45);
    --shadow-md: 0 10px 28px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 24px 56px rgba(0, 0, 0, 0.6);

    --brand: #2aa79b;
    --brand-strong: #43c0b3;
    --brand-soft: #12312e;
    --accent: #e0b83c;

    --good: #34a853;
    --good-soft: #12281b;
    --warn: #d97706;
    --warn-soft: #2c1d0c;
    --serious: #e1425f;
    --serious-soft: #2f1219;
    --info: #7c7bf5;
    --info-soft: #1b1a3a;
    --neutral-soft: #1e2726;

    --chart-2: #d97706;
    --chart-3: #6366f1;
    --chart-4: #e11d48;
    --chart-grid: #232e2c;
    --chart-axis: #6f817f;
    --chart-fill-soft: rgba(13, 148, 136, 0.22);
  }
}