/* ==========================================================================
   Flow State - Color Theme
   Custom color palette for the Flow State storytelling site
   ========================================================================== */

:root {
  /* Primary palette */
  --color-site-title: #032DB3;         /* Site title */
  --color-primary-dark: #032DB3;      /* Headings - deep royal blue */
  --color-primary: #032DB3;           /* Links/accents */
  --color-primary-hover: #0224A0;     /* Link hover state */
  --color-primary-light: #3A5FD4;    /* Lighter primary - borders, accents */

  /* Text colors */
  --color-text: #3A4558;              /* Body text */
  --color-text-muted: #4A5A72;        /* Secondary text / headings */
  --color-secondary: #4A5A72;         /* Alias for muted text */
  --color-text-light: #5A6A82;        /* Meta/captions */

  /* Decorative colors */
  --color-wave-dark: #4A5A72;         /* Borders, icons, large accents */
  --color-wave-dark-hover: #3A4A62;   /* Hover state for wave-dark */
  --color-wave-mid: #bdd4e7;          /* Hover states, subtle fills */
  --color-wave-light: #b2d7ea;        /* Backgrounds, cards */

  /* Background colors */
  --color-bg: #ffffff;
  --color-bg-subtle: #f5f9fb;         /* Subtle tinted background */
  --color-bg-muted: #e8f4f8;          /* Light blue tint */
  --color-bg-alt: #fafafa;            /* Neutral light gray */

  /* Border colors */
  --color-border: #d0dde3;
  --color-border-light: #e5eef2;

  /* Focus indicator */
  --color-focus: #d97706;              /* Amber - visible against blue palette */
  --color-search-highlight: #bdd4e7;   /* Soft blue for search matches */
  --color-text-on-search-highlight: #1a1a1a;

  /* Section backgrounds - dark themed sections */
  --color-section-dark: #2a2a2a;
  --color-section-teal: #02475A;
  --color-section-olive: #454621;
  --color-section-pacific: #00576E;
  --color-section-slate: #2d3e50;
  --color-section-earth: #3d2a1e;        /* Deep warm brown - agricultural/soil theme */
  --color-section-gold: #44381c;         /* Deep amber gold - Gold Rush/mining theme */
  --color-section-granite: #3a3d46;      /* Dark Sierra granite - dam/infrastructure theme */
  --color-section-light: #f0faff;
  --color-section-warm: #FFF6E5;

  /* Text on dark backgrounds */
  --color-text-on-dark: #f0f0f0;
  --color-text-on-dark-muted: #e0e0e0;
  --color-text-on-dark-heading: #ffffff;
  --color-link-on-dark: #8AD4DC;           /* Soft Seafoam - 5.5:1+ on all dark backgrounds */
  --color-link-on-dark-hover: #B0E4EA;     /* Lighter hover state */

  /* Data table highlights */
  --color-highlight-bg: #fef9e7;
  --color-highlight-bg-hover: #fdf2d0;

  /* Letter/special component */
  --color-letter-bg: #fffef5;
  --color-letter-border: #e8e4d4;

  /* Overlay colors - for dark section overlays and semi-transparent elements */
  --color-overlay-light: rgba(255, 255, 255, 0.1);
  --color-overlay-medium: rgba(255, 255, 255, 0.2);
  --color-overlay-strong: rgba(255, 255, 255, 0.4);
  --color-overlay-heavy: rgba(255, 255, 255, 0.9);

  /* Search source badge colors */
  --color-badge-chart: #0d7377;          /* Teal - chart results */
  --color-badge-table: #4a6fa5;          /* Slate blue - table results */
  --color-badge-keywords: #b57b2c;       /* Warm amber - keyword matches */
  --color-badge-section: #5a8a72;        /* Muted sage - section title matches */
  --color-badge-text: #ffffff;           /* White text on badges */

  /* Highlight contrast text - white on focus/amber backgrounds */
  --color-text-on-highlight: #ffffff;

  /* Z-index scale */
  --z-content: 1;
  --z-return-top: 100;
  --z-mobile-overlay: 100;
  --z-mobile-nav: 200;
  --z-hamburger: 300;
  --z-search-modal: 400;
  --z-skip-to-content: 500;
  --z-modal-overlay: 500;

  /* Design tokens - consistent values across components */
  --radius-small: 4px;
  --radius-medium: 8px;
  --radius-large: 12px;

  /* Transition durations */
  --transition-fast: 0.2s ease;
  --transition-normal: 0.3s ease;
}