/* Ocean & Gold: exact source swatches, with accessible UI shades derived from them. */
:root {
  color-scheme: light;
  --brand-ocean: #006E90;
  --brand-gold: #F18F01;
  --brand-mist: #ADCAD6;
  --brand-lime: #99C24D;
  --brand-cyan: #41BBD9;
  --brand-ink: #071924;
  --background: #F6FAFC;
  --surface: #FFFFFF;
  --surface-alt: #EDF5F8;
  --foreground: #092330;
  --muted-foreground: #527180;
  --border: #D8E7EC;
  --primary: #006E90;
  --primary-foreground: #FFFFFF;
  --primary-soft: #E5F2F7;
  --accent: #F18F01;
  --accent-foreground: #092330;
  --accent-text: #925300;
  --success: #476914;
  --success-soft: #EFF5E5;
  --error: #A53535;
  --focus-ring: #006E90;
  --bg: var(--background);
  --surface-2: var(--surface-alt);
  --surface-3: #E1EDF2;
  --soft: var(--surface-alt);
  --ink: var(--foreground);
  --muted: var(--muted-foreground);
  --faint: #5C7481;
  --line: var(--border);
  /* Existing component tone names remain aliases so tools share the same palette. */
  --blue: var(--primary);
  --blue-soft: var(--primary-soft);
  --green: var(--success);
  --green-soft: var(--success-soft);
  --amber: var(--accent-text);
  --amber-soft: #FFF1D9;
  --violet: var(--primary);
  --button: var(--brand-ocean);
  --button-ink: #FFFFFF;
  --shadow: 0 12px 40px #09233008;
  --overlay: #071924B8;
  --caption-bg: #071924E8;
  --caption-ink: #F7FCFE;
  /* Exports always use the light palette, even when the editor is in dark mode. */
  --export-bg: #F6FAFC;
  --export-surface: #FFFFFF;
  --export-ink: #092330;
  --export-muted: #527180;
  --export-line: #ADCAD6;
  --export-blue: #006E90;
  --export-green: #476914;
  --export-amber: #925300;
}
html[data-theme=dark] {
  color-scheme: dark;
  --background: #071924;
  --surface: #0D2935;
  --surface-alt: #153644;
  --foreground: #F7FCFE;
  --muted-foreground: #A0BFCA;
  --border: #274956;
  --primary: #41BBD9;
  --primary-foreground: #06202C;
  --primary-soft: #123D4C;
  --accent-text: #F18F01;
  --success: #99C24D;
  --success-soft: #24371E;
  --error: #FFB4AE;
  --focus-ring: #41BBD9;
  --surface-3: #1C4352;
  --faint: #93B2BE;
  --amber-soft: #392C18;
  --button: var(--brand-gold);
  --button-ink: #092330;
  --shadow: 0 12px 40px #00000020;
}
