/* ScrapMax shared website palette. Edit this contract, never add screen-specific hues.
 * Brand and neutral anchors are the existing marketing colors. Status anchors are
 * the existing yard success/error colors. Derived states use these anchors only.
 * This file must remain byte-identical in app, website, support and plan shells.
 */
:root {
  --sm-brand-navy: #011746;
  --sm-brand-gold: #FEC001;
  --sm-brand-white: #FFFFFF;
  --sm-brand-deep: #000F2E;
  --sm-brand-paper: #F5F5F3;
  --sm-brand-ink: #0B1421;
  --sm-brand-muted: #6F7782;
  --sm-brand-on-dark: #DCE5ED;
  --sm-brand-line: #D6D7D9;
  --sm-success-base: #1F6424;
  --sm-error-base: #A61B1B;
  --sm-clear: transparent;
  --sm-overlay: rgb(1 23 70 / 70%);
  --sm-shadow: rgb(1 23 70 / 20%);
  --sm-on-dark: var(--sm-brand-white);
  --sm-muted-on-dark: var(--sm-brand-on-dark);
  --sm-line-on-dark: rgb(255 255 255 / 20%);
  --sm-line-on-light: var(--sm-brand-line);
  --sm-accent: var(--sm-brand-gold);
  --sm-onAccent: var(--sm-brand-navy);
  --sm-header: var(--sm-brand-navy);
  --sm-pressed: color-mix(in srgb, var(--sm-brand-gold) 88%, var(--sm-brand-navy));
}
:root, :root[data-theme="light"], .sm-theme-light {
  --sm-focus: var(--sm-brand-navy);
  --sm-bg: var(--sm-brand-paper);
  --sm-surface: var(--sm-brand-white);
  --sm-surfaceAlt: var(--sm-brand-paper);
  --sm-input: var(--sm-brand-white);
  --sm-text: var(--sm-brand-ink);
  /* Marketing's mid-gray is reserved for large/decorative text. Navy keeps
     small supporting text legible on paper and white surfaces. */
  --sm-muted: var(--sm-brand-navy);
  --sm-border: var(--sm-line-on-light);
  --sm-primary: var(--sm-brand-navy);
  --sm-onPrimary: var(--sm-brand-white);
  --sm-link: var(--sm-brand-navy);
  --sm-hover: color-mix(in srgb, var(--sm-brand-navy) 7%, var(--sm-brand-white));
  --sm-success: var(--sm-success-base);
  --sm-successSurface: color-mix(in srgb, var(--sm-success-base) 8%, var(--sm-brand-white));
  --sm-error: var(--sm-error-base);
  --sm-errorSurface: color-mix(in srgb, var(--sm-error-base) 7%, var(--sm-brand-white));
  --sm-infoSurface: color-mix(in srgb, var(--sm-brand-navy) 7%, var(--sm-brand-white));
  --sm-warning: var(--sm-brand-navy);
  --sm-warningSurface: color-mix(in srgb, var(--sm-brand-gold) 15%, var(--sm-brand-white));
  color-scheme: light;
}
:root[data-theme="dark"], .sm-theme-dark {
  --sm-focus: var(--sm-brand-gold);
  --sm-bg: var(--sm-brand-deep);
  --sm-surface: var(--sm-brand-navy);
  --sm-surfaceAlt: var(--sm-brand-deep);
  --sm-input: var(--sm-brand-deep);
  --sm-text: var(--sm-brand-white);
  --sm-muted: var(--sm-brand-on-dark);
  --sm-border: var(--sm-line-on-dark);
  --sm-primary: var(--sm-brand-gold);
  --sm-onPrimary: var(--sm-brand-navy);
  --sm-link: var(--sm-brand-gold);
  --sm-hover: color-mix(in srgb, var(--sm-brand-white) 10%, var(--sm-brand-navy));
  --sm-success: color-mix(in srgb, var(--sm-success-base) 30%, var(--sm-brand-white));
  --sm-successSurface: color-mix(in srgb, var(--sm-success-base) 20%, var(--sm-brand-navy));
  --sm-error: color-mix(in srgb, var(--sm-error-base) 30%, var(--sm-brand-white));
  --sm-errorSurface: color-mix(in srgb, var(--sm-error-base) 20%, var(--sm-brand-navy));
  --sm-infoSurface: color-mix(in srgb, var(--sm-brand-white) 7%, var(--sm-brand-navy));
  --sm-warning: var(--sm-brand-gold);
  --sm-warningSurface: color-mix(in srgb, var(--sm-brand-gold) 10%, var(--sm-brand-navy));
  color-scheme: dark;
}