/* SOT design tokens — Series-40 / sot41
   Web hospitality palette (LAVICON gold / cream / charcoal).
   Hex in comments only — components use vars. SVG fills use plain hsl(). */

:root,
html,
[data-theme="light"] {
  /* Layer 1 · Brand axes */
  --brand-h: 40;
  --brand-s: 52%;
  --brand-l: 54%;
  --delta: 0.45;

  /* Layer 2 · Canvas (photopic cream ≈ #f7f3eb) */
  --bg: hsl(40, 33%, 95%);
  --surface: hsl(40, 40%, 99%);
  --surface-raised: hsl(40, 22%, 93%);
  --surface-overlay: hsl(40, 36%, 99%);
  --surface-hover: color-mix(in srgb, var(--surface) 92%, var(--ink));
  --surface-active: color-mix(in srgb, var(--surface) 84%, var(--ink));

  /* Layer 3 · Ink (≈ #1c1815 / #5c554e / #8a8278) */
  --ink: hsl(30, 12%, 10%);
  --ink-muted: hsl(30, 8%, 36%);
  --ink-faint: hsl(30, 6%, 52%);

  /* Layer 4 · Accents (≈ #c59b4e primary, #b8893f hover) */
  --accent: hsl(40, 52%, 54%);
  --accent-ink: hsl(30, 12%, 10%);
  --accent-hover: hsl(38, 50%, 46%);
  --accent-active: hsl(36, 48%, 40%);
  --accent-subtle: color-mix(in srgb, var(--accent) 14%, transparent);
  --accent-alt: hsl(42, 55%, 48%);
  --accent-alt-ink: hsl(30, 12%, 10%);

  /* Layer 5 · Status */
  --success: hsl(145, 55%, 36%);
  --success-subtle: color-mix(in srgb, var(--success) 12%, transparent);
  --warning: hsl(38, 88%, 46%);
  --warning-subtle: color-mix(in srgb, var(--warning) 14%, transparent);
  --danger: hsl(4, 78%, 50%);
  --danger-subtle: color-mix(in srgb, var(--danger) 12%, transparent);
  --info: hsl(200, 72%, 46%);
  --info-subtle: color-mix(in srgb, var(--info) 12%, transparent);

  /* Layer 6 · Lines & focus */
  --line: color-mix(in srgb, var(--ink) 12%, transparent);
  --line-strong: color-mix(in srgb, var(--ink) 24%, transparent);
  --line-focus: var(--accent);
  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent);

  /* Layer 7 · Inputs */
  --input-bg: var(--surface);
  --input-height: clamp(44px, 5vh, 52px);
  --input-pad-x: 1.15rem;
  --switch-track: color-mix(in srgb, var(--ink) 18%, transparent);
  --switch-thumb: var(--surface);
  --field-bg: var(--input-bg);
  --field-ink: var(--ink);
  --field-placeholder: var(--ink-faint);

  /* Layer 8 · Typography */
  --font-display: "Cormorant Garamond", Georgia, serif;
  --font-sans: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --text-display: clamp(2.2rem, min(4.5vw, 6vh), 4.2rem);
  --text-h1: clamp(1.85rem, min(3.4vw, 5.2vh), 3.2rem);
  --text-h2: clamp(1.5rem, 2.8vw, 2.4rem);
  --text-h3: clamp(1.2rem, 1.8vw, 1.5rem);
  --text-body: clamp(0.95rem, 1vw, 1.05rem);
  --text-sm: clamp(0.82rem, 0.9vw, 0.9rem);
  --text-xs: clamp(0.7rem, 0.75vw, 0.78rem);
  --leading-tight: 1.08;
  --leading-snug: 1.25;
  --leading-normal: 1.55;
  --tracking-tight: -0.025em;
  --tracking-wide: 0.14em;

  /* Layer 9 · Radius */
  --radius-raw: 12px;
  --radius-xs: max(2px, calc(var(--radius-raw) * 0.35));
  --radius: var(--radius-raw);
  --radius-lg: calc(var(--radius-raw) * 1.6);
  --radius-pill: 9999px;

  /* Layer 10 · Space */
  --container-max: 1360px;
  --container-pad: clamp(1rem, 3.5vw, 3rem);
  --gap: clamp(1rem, calc(1.5rem / var(--delta, 0.5)), 2.5rem);
  --section-pad-y: clamp(3.5rem, calc(8vw / var(--delta, 0.5)), 7.5rem);

  /* Layer 11 · Elevation */
  --shadow-sm: 0 2px 4px color-mix(in srgb, var(--ink) 5%, transparent);
  --shadow-md: 0 8px 20px -4px color-mix(in srgb, var(--ink) 10%, transparent);
  --shadow-lg: 0 20px 40px -8px color-mix(in srgb, var(--ink) 16%, transparent);
  --shadow-modal: 0 30px 60px -12px color-mix(in srgb, var(--ink) 25%, transparent);
  --backdrop-scrim: color-mix(in srgb, var(--ink) 65%, transparent);
  --glass-blur: blur(16px) saturate(140%);
  --glass-surface: color-mix(in srgb, var(--surface) 78%, transparent);
  --scrim-gradient: linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--bg) 90%, transparent) 100%);

  /* Layer 12 · Z */
  --z-canvas-bg: -1;
  --z-normal: 1;
  --z-sticky: 20;
  --z-header: 50;
  --z-drawer: 100;
  --z-modal-backdrop: 150;
  --z-modal: 200;
  --z-toast: 300;

  /* Layer 13 · Motion */
  --duration: 260ms;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --transition-fast: 150ms var(--ease);
  --transition-smooth: var(--duration) var(--ease);
  --transition-transform: transform var(--duration) var(--ease);

  /* ——— State tokens: buttons ——— */
  --btn-primary-bg: var(--accent);
  --btn-primary-ink: var(--accent-ink);
  --btn-primary-hover: var(--accent-hover);
  --btn-primary-active: var(--accent-active);
  --btn-secondary-bg: transparent;
  --btn-secondary-ink: var(--accent-alt);
  --btn-secondary-border: color-mix(in srgb, var(--accent) 50%, transparent);
  --btn-secondary-hover: color-mix(in srgb, var(--accent) 12%, transparent);

  /* ——— State tokens: chips / loyalty tiers ——— */
  --chip-bg: var(--surface-raised);
  --chip-ink: var(--ink-muted);
  --chip-on-bg: var(--accent);
  --chip-on-ink: var(--accent-ink); /* dark ink on gold — never white on gold */

  /* ——— State tokens: messengers (plain hsl for SVG) ——— */
  --msg-cream: hsl(40, 33%, 93.5%);
  --msg-on-light: hsl(30, 10%, 32%);
  --msg-on-dark: hsl(40, 33%, 93.5%);
  --msg-hover: hsl(38, 50%, 46%);
  --msg-cutout-on-light: hsl(40, 33%, 95%);
  --msg-cutout-on-dark: hsl(30, 14%, 8%);
  --msg-tg: var(--msg-on-light);
  --msg-max: var(--msg-on-light);
  --msg-cutout: var(--msg-cutout-on-light);
  --msg-ring: var(--msg-hover);
  --msg-ink-soft: var(--msg-on-light);

  /* ——— State tokens: modal / fields ——— */
  --modal-bg: var(--surface-overlay);
  --modal-ink: var(--ink);
  --modal-muted: var(--ink-muted);

  /* Lux aliases */
  --lux-bg: var(--bg);
  --lux-surface: var(--surface);
  --lux-ink: var(--ink);
  --lux-muted: var(--ink-muted);
  --lux-accent: var(--accent);
  --lux-accent-ink: var(--accent-ink);
  --lux-line: var(--line);
  --lux-gold: var(--accent);
  --lux-gold-soft: var(--accent-alt);
  --lux-card: var(--surface);
}

/* Dark / inverse hospitality (scotopic) */
html.theme-dark,
html[data-theme="dark"],
[data-theme="inverse"],
.theme-inverse,
.theme-dark,
header.theme-dark,
footer.theme-dark {
  --bg: hsl(30, 14%, 7%);
  --surface: hsl(30, 12%, 11%);
  --surface-raised: hsl(30, 10%, 15%);
  --surface-overlay: hsl(30, 12%, 12%);
  --surface-hover: color-mix(in srgb, var(--surface) 88%, var(--ink));
  --surface-active: color-mix(in srgb, var(--surface) 78%, var(--ink));
  --ink: hsl(40, 28%, 94%);
  --ink-muted: hsl(35, 14%, 68%);
  --ink-faint: hsl(30, 10%, 48%);
  --accent: hsl(42, 55%, 68%);
  --accent-ink: hsl(30, 12%, 10%);
  --accent-hover: hsl(42, 52%, 74%);
  --accent-active: hsl(42, 48%, 60%);
  --accent-subtle: color-mix(in srgb, var(--accent) 16%, transparent);
  --accent-alt: hsl(42, 55%, 68%);
  --accent-alt-ink: hsl(30, 12%, 10%);
  --line: color-mix(in srgb, var(--ink) 14%, transparent);
  --line-strong: color-mix(in srgb, var(--ink) 28%, transparent);
  --input-bg: var(--surface-raised);
  --field-bg: var(--surface-raised);
  --field-ink: var(--ink);
  --field-placeholder: var(--ink-faint);
  --glass-surface: color-mix(in srgb, var(--surface) 75%, transparent);
  --backdrop-scrim: color-mix(in srgb, hsl(30, 20%, 4%) 72%, transparent);

  --btn-primary-bg: var(--accent);
  --btn-primary-ink: var(--accent-ink);
  --btn-primary-hover: var(--accent-hover);
  --btn-primary-active: var(--accent-active);
  --btn-secondary-bg: transparent;
  --btn-secondary-ink: var(--accent);
  --btn-secondary-border: color-mix(in srgb, var(--accent) 45%, transparent);
  --btn-secondary-hover: color-mix(in srgb, var(--accent) 12%, transparent);

  --chip-bg: var(--surface-raised);
  --chip-ink: var(--ink-muted);
  --chip-on-bg: var(--accent);
  --chip-on-ink: var(--accent-ink);

  --msg-tg: var(--msg-on-dark);
  --msg-max: var(--msg-on-dark);
  --msg-hover: hsl(42, 55%, 68%);
  --msg-cutout: var(--msg-cutout-on-dark);
  --msg-ring: var(--msg-hover);

  --modal-bg: var(--surface-overlay);
  --modal-ink: var(--ink);
  --modal-muted: var(--ink-muted);

  --lux-bg: var(--bg);
  --lux-surface: var(--surface);
  --lux-ink: var(--ink);
  --lux-muted: var(--ink-muted);
  --lux-accent: var(--accent);
  --lux-accent-ink: var(--accent-ink);
  --lux-line: var(--line);
  --lux-gold: var(--accent);
  --lux-gold-soft: var(--accent-alt);
  --lux-card: var(--surface);
}

html {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--leading-normal);
}

body {
  background: var(--bg);
  color: var(--ink);
}