/* Generated from src/config/brand-tokens.json. Do not edit directly. */
:root {
  --palette-petrol: #123936;
  --palette-ivory: #F3F0E8;
  --palette-copper: #D46B44;
  --palette-danger: #AE3443;
  --palette-black: #000000;
  --palette-white: #FFFFFF;
  --palette-paper: color-mix(in srgb, var(--palette-ivory) 60%, var(--palette-white));
  --palette-copper-ink: color-mix(in srgb, var(--palette-copper) 65%, var(--palette-petrol));
  --palette-copper-light: color-mix(in srgb, var(--palette-copper) 50%, var(--palette-ivory));
  --palette-danger-light: color-mix(in srgb, var(--palette-danger) 50%, var(--palette-ivory));
  --palette-muted-light: color-mix(in srgb, var(--palette-petrol) 76%, var(--palette-ivory));
  --palette-faint-light: color-mix(in srgb, var(--palette-petrol) 70%, var(--palette-ivory));
  --palette-muted-dark: color-mix(in srgb, var(--palette-ivory) 78%, var(--palette-petrol));
  --palette-faint-dark: color-mix(in srgb, var(--palette-ivory) 68%, var(--palette-petrol));
  --bg: var(--palette-ivory);
  --bg-elevated: var(--palette-paper);
  --bg-subtle: color-mix(in srgb, var(--palette-petrol) 5%, var(--palette-ivory));
  --text: var(--palette-petrol);
  --muted: var(--palette-muted-light);
  --faint: var(--palette-faint-light);
  --accent: var(--palette-petrol);
  --accent-bright: var(--palette-petrol);
  --on-accent: var(--palette-ivory);
  --support: color-mix(in srgb, var(--palette-petrol) 75%, var(--palette-copper));
  --aqqel: var(--palette-copper-ink);
  --aqqel-bright: var(--palette-copper);
  --danger: var(--palette-danger);
  --surface-glass: color-mix(in srgb, var(--bg-elevated) 76%, transparent);
  --surface-strong: color-mix(in srgb, var(--bg-elevated) 96%, transparent);
  --line: color-mix(in srgb, var(--text) 12%, transparent);
  --line-strong: color-mix(in srgb, var(--text) 22%, transparent);
  --accent-soft: color-mix(in srgb, var(--accent) 10%, transparent);
  --aqqel-soft: color-mix(in srgb, var(--aqqel) 12%, transparent);
  --aqqel-button: var(--palette-copper-ink);
  --on-aqqel: var(--palette-ivory);
  --header-bg: color-mix(in srgb, var(--bg) 80%, transparent);
  --shadow-sm: 0 8px 30px color-mix(in srgb, var(--palette-black) 8%, transparent);
  --shadow-lg: 0 28px 80px color-mix(in srgb, var(--palette-black) 18%, transparent);
  --brand-hydra: var(--accent);
  --brand-signal: var(--palette-copper);
  --brand-aqqel: var(--aqqel-bright);
  --canvas-color: var(--support);
}
:root[data-theme='dark'], .flow-diagram, .aqqel-section, .site-footer {
  --bg: var(--palette-petrol);
  --bg-elevated: color-mix(in srgb, var(--palette-petrol) 92%, var(--palette-ivory));
  --bg-subtle: color-mix(in srgb, var(--palette-petrol) 88%, var(--palette-black));
  --text: var(--palette-ivory);
  --muted: var(--palette-muted-dark);
  --faint: var(--palette-faint-dark);
  --accent: var(--palette-ivory);
  --accent-bright: var(--palette-ivory);
  --on-accent: var(--palette-petrol);
  --support: color-mix(in srgb, var(--palette-ivory) 72%, var(--palette-petrol));
  --aqqel: var(--palette-copper-light);
  --aqqel-bright: var(--palette-copper);
  --danger: var(--palette-danger-light);
  --surface-glass: color-mix(in srgb, var(--bg-elevated) 76%, transparent);
  --surface-strong: color-mix(in srgb, var(--bg-elevated) 96%, transparent);
  --line: color-mix(in srgb, var(--text) 12%, transparent);
  --line-strong: color-mix(in srgb, var(--text) 22%, transparent);
  --accent-soft: color-mix(in srgb, var(--accent) 10%, transparent);
  --aqqel-soft: color-mix(in srgb, var(--aqqel) 12%, transparent);
  --aqqel-button: var(--palette-copper-ink);
  --on-aqqel: var(--palette-ivory);
  --header-bg: color-mix(in srgb, var(--bg) 80%, transparent);
  --shadow-sm: 0 8px 30px color-mix(in srgb, var(--palette-black) 8%, transparent);
  --shadow-lg: 0 28px 80px color-mix(in srgb, var(--palette-black) 18%, transparent);
  --brand-hydra: var(--accent);
  --brand-signal: var(--palette-copper);
  --brand-aqqel: var(--aqqel-bright);
  --canvas-color: var(--support);
}
html { background: var(--bg); }