/*
  STEWARD COLORS
  Keep brand and semantic color decisions in this file.
*/

:root {
  /* Colors pulled from the current Steward visual system */
  --color-ink: #17363a;
  --color-teal: #2b5055;
  --color-dark-surface: #2b5a60;
  --color-red: #c44532;
  --color-red-dark: #a73829;
  --color-gold: #daa540;
  --color-gold-light: #e3ba6c;

  /* Semantic action colors */
  --color-action-primary: var(--color-red);
  --color-action-primary-hover: var(--color-red-dark);
  --color-action-secondary: var(--color-gold);
  --color-action-secondary-hover: var(--color-gold-light);

  /* Neutral colors used to support the interface */
  --color-cream: #f7f2e8;
  --color-service-surface: #f4e4c9;
  --color-white: #ffffff;
  --color-text: #24383b;
  --color-muted: #667477;
  --color-border: #d7dedc;
  --color-focus: #daa540;

  /* Cream text colors for Ink, Brand Teal, and Dark Surface backgrounds */
  --color-on-dark: var(--color-cream);
  --color-on-dark-muted: rgb(247 242 232 / 0.82);
  --color-on-dark-subtle: rgb(247 242 232 / 0.68);
}

/* Default color assignments */
body {
  color: var(--color-text);
  background: var(--color-cream);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--color-ink);
}

a {
  color: var(--color-teal);
}

a:hover {
  color: var(--color-ink);
}

/* Text on dark backgrounds */
.text-on-dark {
  color: var(--color-on-dark);
}

.text-on-dark-muted {
  color: var(--color-on-dark-muted);
}

.text-on-dark-subtle {
  color: var(--color-on-dark-subtle);
}

.text-on-dark-accent,
.link-on-dark {
  color: var(--color-gold-light);
}

.link-on-dark:hover {
  color: var(--color-on-dark);
}

/* Surface utilities */
.surface-light {
  background: var(--color-white);
}

.surface-ink,
.surface-teal,
.surface-dark {
  color: var(--color-on-dark);
}

.surface-ink {
  background: var(--color-ink);
}

.surface-teal {
  background: var(--color-teal);
}

.surface-dark {
  background: var(--color-dark-surface);
}

.surface-ink :is(h1, h2, h3, h4, h5, h6),
.surface-teal :is(h1, h2, h3, h4, h5, h6),
.surface-dark :is(h1, h2, h3, h4, h5, h6) {
  color: var(--color-on-dark);
}

/* Swatch preview utilities */
.bg-ink {
  background: var(--color-ink);
}

.bg-teal {
  background: var(--color-teal);
}

.bg-dark-preview {
  background: var(--color-dark-surface);
}

.bg-red {
  background: var(--color-red);
}

.bg-gold {
  background: var(--color-gold);
}

.bg-gold-light {
  background: var(--color-gold-light);
}

.bg-cream {
  background: var(--color-cream);
}

.bg-service-surface {
  background: var(--color-service-surface);
}

.bg-white {
  background: var(--color-white);
}

.bg-muted {
  background: var(--color-muted);
}