/* css/colors.css - Premium Color Palette */
:root {
  /* Core neutrals - sophisticated warm grays */
  --color-background: #ffffff;
  --color-background-subtle: #F5F5F4;
  --color-background-muted: #E7E5E4;
  
  /* Text hierarchy - rich, high-contrast */
  --color-text: #1C1917;
  --color-text-secondary: #57534E;
  --color-text-muted: #6B6662;
  
  /* Primary brand - deep, sophisticated blue */
  --color-primary: #1E293B;
  --color-primary-dark: #0F172A;
  --color-primary-light: #334155;
  --color-primary-text: #F8FAFC;
  
  /* Secondary surface - white and near-white, used for the low-emphasis button ramp.
     (Named "sage green" until BRI-5391; it has been #ffffff for as long as git remembers.) */
  --color-secondary: #ffffff;
  --color-secondary-light: #F8FAFC;
  --color-secondary-text: #1E293B;
  
  /* Accent color - premium emerald */
  --color-accent: #059669;
  --color-accent-light: #10B981;
  --color-accent-dark: #047857;
  
  /* Interactive states */
  --color-border: #D6D3D1;
  --color-border-subtle: #E7E5E4;
  --color-focus-ring: #059669;
  
  /* Button hover states - more sophisticated transitions */
  --color-primary-hover: #0F172A;
  --color-primary-hover-dark: #020617;
  --color-secondary-hover: #F1F5F9;
  --color-secondary-hover-light: #E2E8F0;

  /* Icons Colors */
  --color-icon-primary: #1E293B;
  --color-icon-secondary: #ffffff;
  --color-icon-tertiary: #D6D3D1;
  --color-icon-quaternary: #57534E;
  
  /* Premium additions */
  --color-surface: #FEFEFE;
  --color-surface-elevated: #FEFEFE;
  /* The brand CTA fill. #003829 is the deep fern already used for CTA section backgrounds
     (css/sections.css). BRI-5391 points .btn-primary at it too, so one colour means "act" across
     the site instead of a navy gradient on buttons and fern behind sections. */
  --color-cta-background: #003829;
  --color-cta-background-hover: #00503A; /* lifts on hover rather than darkening: the base is
                                            already near-black, so darkening reads as nothing */
  --color-cta-text: #F8FAFC;
  --shadow-subtle: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-medium: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-large: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  /* Button depth (BRI-5422). Deliberately NOT --shadow-subtle/--shadow-large: those are the generic
     surface shadows and neither matches. The resting value is twice the opacity of --shadow-subtle,
     and the hover value is a single tighter, darker layer with a -8px spread — that punch is the
     pre-BRI-5391 button treatment this restores. Kept as tokens so the next consumer copies a name,
     not a raw rgba(). */
  --shadow-btn-rest: 0 1px 3px rgba(0, 0, 0, 0.1);
  --shadow-btn-hover: 0 8px 25px -8px rgba(0, 0, 0, 0.3);
  /* Guide landing pages keep the softer pre-BRI-5391 pair they always had (they never loaded
     animations.css, so they never got the deep hover or the shimmer). Primary was 0.15 and
     secondary 0.1 alpha at the same offset/blur; collapsed to one token rather than ship two
     imperceptibly-different shadows. */
  --shadow-btn-hover-soft: 0 2px 8px rgba(0, 0, 0, 0.15);
  --shadow-btn-press: 0 1px 2px rgba(0, 0, 0, 0.1);

  /* Madhu guide specific - premium gold/bronze accents */
  --color-gold: #B8935A;
  --color-gold-light: #C4A676;
  --color-gold-lighter: #D4B483;
  --color-gold-dark: #92754A;
  --color-amber-dark: #92400E;
  --color-amber: #B45309;
  --color-amber-light: #D97706;
}