/* BraCo color tokens. Dark tokens stay on :root for the theme toggle.
   Customer pages set data-theme="light".
   Layout for this product lives in app.css.
   To recolor the site, change the --scheme-* tokens in the shared block below.
   Navy is the base. Maroon is brand weight. Gold is only the primary call to
   action (--scheme-cta), the one highlighted word in a checkup caption
   (--gold-ink), and the Most popular badge. */

:root,
[data-theme='dark'] {
  color-scheme: dark;
  --bg-app: #121417;
  --bg-surface: #1b1f24;
  --bg-surface-elevated: #242a31;
  --bg-subtle: #2d343c;
  --text-primary: #f1f3f5;
  --text-secondary: #c3c9d1;
  --text-muted: #a9b1bb;
  --border-subtle: #3a424c;
  --border-control: #6b7581;
  --brand-primary: #7fa6cf;
  --brand-primary-light: #a9c3e0;
  --brand-primary-dark: #2a5480;
  --brand-red: #dd8595;
  --brand-accent: #dd8595;
  --on-gold: #142e48;
  --selected-fill: #22364b;
  --selected-line: #7fa6cf;
  --selected-ink: #dbe6f2;
  --status-success: #8ccba4;
  --status-warning: #d8b878;
  --status-danger: #dd8595;
  --status-info: #92acb9;
  --status-success-bg: #1f3328;
  --status-warning-bg: #322b1c;
  --status-danger-bg: #342329;
  --status-info-bg: #22303b;
  --button-primary: #2a5480;
  --button-primary-hover: #336494;
  --button-primary-pressed: #224569;
  --button-secondary: var(--bg-surface-elevated);
  --button-text: #ffffff;
  --selected-bg: #22364b;
  --selection-text: #dbe6f2;
  --shadow-color: #00000040;
  --gold-ink: #e6c36a;
  --gold-fill: #3a3220;
  --gold-line: #c9ab74;
}

[data-theme='light'] {
  color-scheme: light;
  --bg-app: #f3f0ea;
  --bg-surface: #ffffff;
  --bg-surface-elevated: #fffdf8;
  --bg-subtle: #e7e2d8;
  --text-primary: var(--scheme-navy);
  --text-secondary: #3d4c63;
  --text-muted: #4a5568;
  --border-subtle: #e4ddd0;
  --border-control: var(--scheme-navy);
  --brand-primary: var(--scheme-navy);
  --brand-primary-light: #3d6a94;
  --brand-primary-dark: var(--scheme-navy);
  --brand-red: var(--scheme-maroon);
  --brand-accent: var(--scheme-maroon);
  --on-gold: var(--scheme-cta-ink);
  --selected-fill: var(--scheme-navy-wash);
  --selected-line: var(--scheme-navy);
  --selected-ink: var(--scheme-navy);
  --gold-ink: var(--scheme-gold-ink);
  --gold-fill: var(--scheme-gold-fill);
  --gold-line: var(--scheme-gold);
  --button-primary: var(--scheme-navy);
  --button-primary-hover: var(--scheme-navy-deep);
  --button-primary-pressed: var(--scheme-navy-press);
  --button-text: #ffffff;
  --status-success: #1f6b3a;
  --status-warning: #7a4b08;
  --status-danger: var(--scheme-maroon);
  --status-info: #1e4d73;
  --status-success-bg: #e5f6eb;
  --status-warning-bg: #fff1d6;
  --status-danger-bg: #fde8ec;
  --status-info-bg: #e7f1f8;
  --selected-bg: var(--scheme-navy);
  --selection-text: #ffffff;
  --shadow-color: #142e4818;
}

:root,
[data-theme] {
  --scheme-navy: #142e48;
  --scheme-navy-deep: #0f2236;
  --scheme-navy-press: #0c1b2c;
  --scheme-navy-hover: #1b3f66;
  --scheme-maroon: #7d2533;
  --scheme-maroon-deep: #541824;
  --scheme-maroon-hover: #641c28;
  --scheme-navy-wash: #e6eef6;
  --scheme-gold: #b49560;
  --scheme-gold-bright: #ffc430;
  --scheme-gold-soft: #f0d48a;
  --scheme-gold-ink: #6f4e12;
  --scheme-gold-fill: #fff6d4;
  --scheme-gold-badge-bg: #3a3220;
  --scheme-cta: #ffc430;
  --scheme-cta-ink: var(--scheme-navy);
  --scheme-cta-hover: #e6ac1c;
  --scheme-cta-press: #c99210;
  --scheme-cta-shadow: #8a640c;
  --bg: var(--bg-app);
  --surface: var(--bg-surface);
  --surface-2: var(--bg-surface-elevated);
  --text: var(--text-primary);
  --dark: var(--text-primary);
  --text-label: var(--text-secondary);
  --border: var(--border-subtle);
  --input-bg: var(--bg-surface-elevated);
  --input-border: var(--border-control);
  --shadow: var(--shadow-color);
  --olive: var(--brand-primary);
  --maroon: var(--status-danger);
  --focus: var(--brand-primary-light);
}

[data-theme='light'] {
  --olive: var(--brand-primary-dark);
  --focus: var(--brand-primary-dark);
}