Brand Identity

ANCHOR:       sv-deep-teal   #213C47   Headers, hero panels, headlines
TEXT:         sv-gunmetal    #343A40   Body text
SECONDARY:    sv-slate       #6A7F83   Secondary text, descriptions
MUTED:        sv-steel       #88989A   Placeholders, disabled states

CTA:          sv-brown       #6B4E3D   Primary action buttons ONLY
CTA-HOVER:    sv-brown-hover #5A4133   Button hover states
ACCENT:       sv-accent      #0E6F6A   Links, labels, focus rings

BG-WARM:      sv-parchment   #EEEBE5   Page backgrounds
BG-COOL:      sv-alabaster   #E0E1DD   Alternating sections
BG-ELEVATED:  sv-white       #FFFFFF   Cards, modals, inputs

.card {
  @apply bg-sv-white rounded-xl shadow-sm border border-sv-deep-teal/10 p-6;
}

.input {
  @apply w-full px-4 py-3 border border-sv-deep-teal/12 rounded-lg;
  @apply bg-sv-white text-sv-gunmetal;
  @apply focus:ring-2 focus:ring-sv-accent focus:ring-opacity-30;
  @apply placeholder:text-sv-steel;
}

:root {
  /* Primary: Anchor & Text */
  --color-sv-deep-teal: 33 60 71;
  --color-sv-gunmetal: 52 58 64;
  --color-sv-slate: 106 127 131;
  --color-sv-steel: 136 152 154;

  /* Accent & Action */
  --color-sv-brown: 107 78 61;
  --color-sv-brown-hover: 90 65 51;
  --color-sv-accent: 14 111 106;

  /* Backgrounds */
  --color-sv-parchment: 238 235 229;
  --color-sv-alabaster: 224 225 221;
  --color-sv-white: 255 255 255;
}