/*
 * Crestalon global palette.
 * Select the active preset in src/data/theme.ts, then tune colors here.
 */
:root,
:root[data-theme='light'] {
  color-scheme: light;
  --paper: #eae8e3;
  --paper-2: #f4f3ef;
  --surface-card: #f1efea;
  --ink: #1b1e22;
  --ink-soft: #4c525a;
  --text-soft-2: #5a616b;
  --text-muted: #8a9099;
  --brass: #b08a3e;
  --brass-hi: #c9a24b;
  --accent-ink: #1b1e22;
  --control-active-bg: #1b1e22;
  --control-active-text: #ffffff;
  --surface-dark: #191c20;
  --surface-dark-2: #23272c;
  --text-on-dark: #ffffff;
  --text-on-dark-soft: #b7bdc5;
  --text-on-dark-body: #a8adb4;
  --text-on-dark-muted: #9aa1ab;
  --header-logo-filter: none;
  --trusted-logo-filter: grayscale(1);
}

:root[data-theme='dark'] {
  color-scheme: dark;
  --paper: #16181b;
  --paper-2: #1d2024;
  --surface-card: #25292e;
  --ink: #f2efe8;
  --ink-soft: #cdd1d6;
  --text-soft-2: #c5c9cf;
  --text-muted: #aeb4bc;
  --brass: #c39a48;
  --brass-hi: #d5b25f;
  --accent-ink: #17191c;
  --control-active-bg: #c39a48;
  --control-active-text: #17191c;
  --surface-dark: #0f1113;
  --surface-dark-2: #181b1f;
  --text-on-dark: #f7f4ee;
  --text-on-dark-soft: #bec3ca;
  --text-on-dark-body: #c4c9cf;
  --text-on-dark-muted: #aeb5bd;
  --header-logo-filter: brightness(0) invert(1);
  --trusted-logo-filter: grayscale(1) invert(1) brightness(1.25) contrast(1.1);
}

:root {
  --line: color-mix(in srgb, var(--ink) 12%, transparent);
  --line-strong: color-mix(in srgb, var(--ink) 24%, transparent);
  --line-dark: color-mix(in srgb, var(--text-on-dark) 14%, transparent);
  --header-bg: color-mix(in srgb, var(--paper) 90%, transparent);
  --menu-bg: color-mix(in srgb, var(--paper-2) 98%, transparent);
  --form-control-bg: var(--paper-2);
  --text-on-dark-strong: color-mix(in srgb, var(--text-on-dark) 78%, transparent);
  --text-on-dark-medium: color-mix(in srgb, var(--text-on-dark) 72%, transparent);
  --text-on-dark-subtle: color-mix(in srgb, var(--text-on-dark) 48%, transparent);
  --white: #ffffff;
}