/*
 * variables.css — APR Interactive Map Design Token System
 *
 * ALL CSS custom properties live here and ONLY here.
 * Never define color, spacing, or typography values in component files.
 * Import this file first in index.html so all other stylesheets inherit these tokens.
 */

:root {

  /* ─── Color: Navy (primary) ─────────────────────────────────── */
  --color-navy:        #1a2e4a;   /* deep navy — nav, panels, dot default */
  --color-navy-dark:   #132238;   /* darkest — footer background */
  --color-navy-mid:    #243d5c;   /* mid tone — hover states, dividers */
  --color-navy-light:  #2e4f73;   /* lightest navy — subtle borders */

  /* ─── Color: Accent ─────────────────────────────────────────── */
  --color-orange:      #e8642a;   /* CTA orange — buttons, selected dots, highlights */
  --color-orange-dark: #c9521f;   /* hover state for orange elements */
  --color-green:       #4a8c3f;   /* APR green — HCV button, logo leaf accent */
  --color-green-dark:  #3a7031;   /* hover state for green elements */

  /* ─── Color: Backgrounds ────────────────────────────────────── */
  --color-bg:          #ffffff;   /* page and nav background */
  --color-bg-grey:     #f4f6f8;   /* light grey — carousel, hover rows */
  --color-bg-grey-mid: #e8ecf0;   /* slightly darker grey — borders on light bg */

  /* ─── Color: Text ───────────────────────────────────────────── */
  --color-white:       #ffffff;
  --color-text-dark:   #1a2e4a;   /* primary text on light backgrounds */
  --color-text-mid:    #4a6080;   /* secondary text on light backgrounds */
  --color-text-light:  #7a90a8;   /* tertiary / meta text */
  --color-grey-light:  #c8d4e0;   /* secondary text on dark backgrounds */
  --color-grey-mid:    #7a90a8;   /* tertiary / meta text (dates, labels) */
  --color-grey-border: #3a5070;   /* subtle borders on dark bg */
  --color-border-light: #dde3ea;  /* borders on light backgrounds */

  /* ─── Color: Map Dot Markers ────────────────────────────────── */
  --color-dot-default:  var(--color-navy);
  --color-dot-hover:    var(--color-orange);
  --color-dot-selected: var(--color-orange);
  --color-dot-stroke:   #ffffff;

  /* ─── Typography ────────────────────────────────────────────── */
  --font-family:        'Inter', 'Helvetica Neue', Arial, sans-serif;

  --font-size-xs:       11px;
  --font-size-sm:       13px;
  --font-size-base:     15px;
  --font-size-md:       17px;
  --font-size-lg:       22px;
  --font-size-xl:       32px;
  --font-size-2xl:      48px;

  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-bold:   700;

  --letter-spacing-caps:  0.08em;   /* uppercase label tracking */
  --letter-spacing-tight: -0.01em;  /* large numerals */

  --line-height-base:   1.5;
  --line-height-tight:  1.2;

  /* ─── Layout ────────────────────────────────────────────────── */
  --nav-height:         64px;
  --filter-height:      80px;
  --panel-width:        360px;
  --panel-min-width:    320px;

  /* ─── Spacing Scale ─────────────────────────────────────────── */
  --space-xs:   4px;
  --space-sm:   8px;
  --space-md:   16px;
  --space-lg:   24px;
  --space-xl:   40px;
  --space-2xl:  64px;

  /* ─── Border Radius ─────────────────────────────────────────── */
  --radius-sm:    4px;
  --radius-md:    8px;
  --radius-lg:    16px;
  --radius-pill:  999px;

  /* ─── Shadows ───────────────────────────────────────────────── */
  --shadow-panel:  4px 0 20px rgba(0, 0, 0, 0.4);
  --shadow-modal:  0 8px 40px rgba(0, 0, 0, 0.6);
  --shadow-card:   0 2px 12px rgba(0, 0, 0, 0.3);

  /* ─── Transitions ───────────────────────────────────────────── */
  --transition-fast:   150ms ease-out;   /* hover states */
  --transition-panel:  250ms ease-out;   /* panel slide-in/out */
  --transition-modal:  200ms ease-out;   /* modal fade */

  /* ─── Z-index Scale ─────────────────────────────────────────── */
  --z-map:         1;
  --z-panel:     100;
  --z-modal:     200;
  --z-nav:       300;

}