/*
 * Theme tokens (ADR 029). Source: docs/design/design_handoff_meizinger_violet/tokens.css.
 * Role tokens below are the only place with hex values. The live theme is set on <html>
 * (SITE_THEME in app/root.tsx): no attribute = teal, "lavender" or "ultraviolet".
 * The older --mz-* and --color-* names further down are aliases of the role tokens, so
 * every page follows the theme.
 */
:root {
  color-scheme: light;

  /* Type */
  --font-display: "Cormorant Garamond", Georgia, serif;
  --font-body: "Lora", Georgia, serif;

  /* Layout */
  --container: 1320px;
  --gutter: clamp(16px, 4vw, 32px);
  --section-y: clamp(64px, 9vw, 112px);
  --header-h: 89px;

  /* Colour roles — teal (original) */
  --ink: #0B2230;
  --bg-page: #F1F6F7;
  --surface: #FFFFFF;
  --text-body: #3B4A52;
  --text-muted: #5A6B73;
  --text-muted-2: #7C8D94;
  --border: #D3E2E5;
  --divider: #DCE8EA;
  --divider-2: #DCE6E8;
  --tint: #E1EFEF;
  --tint-2: #D3E6E6;
  --accent: #12666E;
  --primary: #135F6A;
  --primary-hover: #0E4B5E;
  --on-primary: #FFFFFF;
  /* Pure white text on dark: logo, active menu item, header button, featured card title. */
  --on-dark-strong: #FFFFFF;
  --outline: #A8854A;
  --title-accent: #A67C3D;
  --dark-section: #123544;
  --dark-deep: #061823;
  --dark-hover: #0E2A38;
  --dark-border: #24414F;
  --dark-border-2: #1F3A47;
  --on-dark: #F1F6F7;
  --on-dark-muted: #B8C9CF;
  --on-dark-muted-2: #8FA3AB;
  --on-dark-accent: #C9A465;
  --dark-img-bg: #0D4A5C;
  --hero-gradient: linear-gradient(110deg, #F1F6F8 0%, #E8F2F3 55%, #D6ECEB 100%);
  --feature-gradient: linear-gradient(135deg, #1B6E76 0%, #0D4A5C 100%);
  --error: #B3261E;
}

[data-theme="lavender"] {
  --ink: #1F1340;
  --bg-page: #F6F2FC;
  --text-body: #43385A;
  --text-muted: #6B5F82;
  --text-muted-2: #8A7CA3;
  --border: #E3DAF2;
  --divider: #E8E0F5;
  --divider-2: #E7E0F2;
  --tint: #EFE8FA;
  --tint-2: #E6DCF7;
  --accent: #7B4BD6;
  --primary: #6A3FD1;
  --primary-hover: #5631B5;
  --outline: #B98AE0;
  --title-accent: #8E5BD9;
  --dark-section: #2A1A5C;
  --dark-deep: #150B33;
  --dark-hover: #1F1247;
  --dark-border: #3E2A6E;
  --dark-border-2: #34225F;
  --on-dark: #F6F2FC;
  --on-dark-muted: #CDBFE6;
  --on-dark-muted-2: #A897C8;
  --on-dark-accent: #D9B3FF;
  --dark-img-bg: #3B1F86;
  --hero-gradient: linear-gradient(110deg, #F7F3FD 0%, #EEE6FB 55%, #E2D3F8 100%);
  --feature-gradient: linear-gradient(135deg, #6E3FE0 0%, #3B1F86 100%);
}

[data-theme="ultraviolet"] {
  --ink: #160A3A;
  --bg-page: #F3EEFF;
  --text-body: #3B2F63;
  --text-muted: #645A86;
  --text-muted-2: #7E70A8;
  --border: #DDD0FA;
  --divider: #E4D9FC;
  --divider-2: #E6DDFB;
  --tint: #ECE3FF;
  --tint-2: #E2D6FD;
  --accent: #5B21F0;
  --primary: #4C1FE0;
  --primary-hover: #3A12C2;
  --outline: #E26BD6;
  --title-accent: #B02FC9;
  --dark-section: #24107A;
  --dark-deep: #0E0530;
  --dark-hover: #190A57;
  --dark-border: #3A2290;
  --dark-border-2: #33188F;
  --on-dark: #F3EEFF;
  --on-dark-muted: #C3B3F0;
  --on-dark-muted-2: #A99BDB;
  --on-dark-accent: #F2A3E8;
  --dark-img-bg: #2A0F8A;
  --hero-gradient: linear-gradient(110deg, #F4EEFF 0%, #E3D2FF 55%, #C9B0FF 100%);
  --feature-gradient: linear-gradient(135deg, #7B2FF7 0%, #2A0F8A 100%);
}

/* Aliases used by the older pages and components (ADR 027 names, ADR 029 values). */
:root {
  --color-bg: var(--bg-page);
  --color-surface: var(--surface);
  --color-text: var(--ink);
  --color-accent: var(--accent);
  --color-accent-2: var(--primary);
  --color-divider: var(--divider);
  --color-neutral-100: var(--bg-page);
  --color-neutral-200: var(--divider);
  --color-neutral-800: var(--text-body);
  --color-neutral-900: var(--ink);
  --color-accent-100: var(--tint);
  --color-accent-300: var(--outline);
  --color-accent-700: var(--primary-hover);
  --color-accent-800: var(--dark-section);

  --mz-bg-deep: var(--bg-page);
  --mz-bg-glow: var(--tint);
  --mz-sky: var(--bg-page);
  --mz-sky-hero: var(--hero-gradient);

  --mz-text: var(--ink);
  --mz-text-soft: var(--text-body);
  --mz-text-tagline: var(--ink);
  --mz-text-muted: var(--text-body);
  --mz-text-faint: var(--text-muted);

  --mz-gold: var(--primary);
  --mz-gold-text: var(--accent);
  --mz-gold-hover: var(--primary-hover);
  --mz-line: var(--divider);
  --mz-link-line: var(--outline);
  --mz-selection: var(--tint-2);
  --mz-error: var(--error);

  --mz-card-bg: var(--surface);
  --mz-card-border: var(--divider);
  --mz-field-bg: var(--bg-page);
  --mz-backdrop: rgb(0 0 0 / 0.5);

  --mz-featured-bg: var(--ink);
  --mz-featured-border: var(--dark-border);
  --mz-featured-text: var(--on-dark);
  --mz-featured-text-soft: var(--on-dark-muted);
  --mz-featured-btn-bg: var(--surface);
  --mz-featured-btn-hover: var(--tint);
  --mz-featured-btn-text: var(--primary);
  --mz-featured-ghost-hover: var(--dark-hover);
  --mz-featured-shadow: none;

  --mz-btn-hover: var(--tint);
  --mz-btn-featured-bg: var(--primary);
  --mz-btn-featured-hover: var(--primary-hover);
  --mz-btn-featured-text: var(--on-primary);
  --mz-brand-gold: var(--title-accent);
  --mz-brand-gold-line: var(--outline);

  --mz-dark-bg: var(--dark-deep);
  --mz-dark-text: var(--on-dark);
  --mz-dark-text-muted: var(--on-dark-muted);
  --mz-dark-text-faint: var(--on-dark-muted-2);
  --mz-dark-gold-text: var(--on-dark-accent);
  --mz-dark-pill-text: var(--on-dark);
  --mz-dark-gold-hover: var(--on-dark);
  --mz-dark-line: var(--dark-border);

  /* Layout and type of the older pages */
  --mz-gutter: var(--gutter);
  --mz-max: var(--container);
  --mz-header-pad-lg: 20px;
  --mz-header-h-lg: var(--header-h);

  --mz-fs-hero: clamp(56px, 7vw, 104px);
  --mz-fs-featured: clamp(28px, 1vw + 24px, 36px);
  --mz-fs-card: clamp(26px, 0.6vw + 22px, 30px);
  --mz-fs-page-title: clamp(44px, 5.6vw, 76px);
  --mz-fs-section: clamp(32px, 2.5vw + 22px, 44px);
  --mz-fs-body: 16px;

  --font-heading: var(--font-display);
  --font-heading-weight: 500;

  --space-1: 4.6px;
  --space-2: 9.2px;
  --space-3: 13.8px;
  --space-4: 18.4px;
  --space-6: 27.6px;
  --space-8: 36.8px;

  /* Square corners everywhere except pills; no shadows (design handoff). */
  --radius-sm: 0;
  --radius-md: 0;
  --radius-lg: 0;
  --radius-pill: 999px;

  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: none;
}