/* ==========================================================================
   Rachel Cuevas for PA State Representative — District 187
   DESIGN TOKENS
   --------------------------------------------------------------------------
   This file is the SINGLE SOURCE OF TRUTH for every color, font, spacing,
   radius, shadow, transition, and layout-width value used across the site.

   RULE: No other CSS file should ever hardcode a hex value, a font-family
   name, a pixel spacing value, a border-radius, a box-shadow, or a
   transition timing. Always reference a var(--token-name) defined here.
   If a new value is needed, add a token here first, then consume it.
   ========================================================================== */

:root {
  /* ------------------------------------------------------------------------
     COLOR — brand palette (exact hex values from creative brief)
     ------------------------------------------------------------------------ */
  --color-navy-primary: #071B33;
  --color-navy-secondary: #102F52;
  --color-blue: #1D5D91;
  --color-red: #C6283D;
  --color-red-bright: #E13B45;
  --color-white: #FFFFFF;
  --color-offwhite: #F5F7FA;
  --color-text-dark: #161B22;
  --color-text-muted: #5A6472;

  /* Semantic color aliases — use these in component CSS where possible so
     intent is clear (e.g. "text on dark surface" vs raw color name). */
  --color-text-on-dark: var(--color-white);
  --color-text-on-light: var(--color-text-dark);
  --color-border-light: #E1E6EC;
  --color-border-on-dark: rgba(255, 255, 255, 0.25);
  --color-focus-ring: var(--color-red-bright);
  --color-link: var(--color-blue);
  --color-link-on-dark: var(--color-white);

  /* ------------------------------------------------------------------------
     TYPOGRAPHY
     ------------------------------------------------------------------------ */
  /* Headings: Barlow Condensed — bold, editorial, condensed feel */
  --font-heading: "Barlow Condensed", "Arial Narrow", sans-serif;
  /* Body: Inter — clean, highly legible sans-serif */
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --font-weight-heading: 700;
  --font-weight-heading-black: 800;
  --font-weight-body-regular: 400;
  --font-weight-body-medium: 500;
  --font-weight-body-bold: 700;

  --line-height-heading: 1.1;
  --line-height-body: 1.6;

  /* ------------------------------------------------------------------------
     SPACING SCALE — 8px base
     ------------------------------------------------------------------------ */
  --space-xs: 0.5rem;   /* 8px */
  --space-sm: 1rem;     /* 16px */
  --space-md: 1.5rem;   /* 24px */
  --space-lg: 2rem;     /* 32px */
  --space-xl: 3rem;     /* 48px */
  --space-2xl: 4rem;    /* 64px */
  --space-3xl: 6rem;    /* 96px */

  /* ------------------------------------------------------------------------
     BORDER RADIUS — moderate radius, never sharp, never pill-shaped
     ------------------------------------------------------------------------ */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-full: 999px; /* reserved for avatars/badges only, not buttons */

  /* ------------------------------------------------------------------------
     SHADOW — subtle elevation
     ------------------------------------------------------------------------ */
  --shadow-sm: 0 1px 2px rgba(7, 27, 51, 0.08);
  --shadow-md: 0 4px 12px rgba(7, 27, 51, 0.12);
  --shadow-lg: 0 12px 32px rgba(7, 27, 51, 0.18);
  --shadow-hover-lift: 0 10px 24px rgba(7, 27, 51, 0.16);

  /* ------------------------------------------------------------------------
     LAYOUT
     ------------------------------------------------------------------------ */
  --container-max-width: 1200px;
  --container-padding-inline: var(--space-md);
  --header-height: 136px;

  /* ------------------------------------------------------------------------
     TRANSITIONS / EASING — restrained animation
     ------------------------------------------------------------------------ */
  --transition-fast: 150ms ease;
  --transition-base: 200ms ease;
  --transition-slow: 320ms ease;
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);

  /* ------------------------------------------------------------------------
     Z-INDEX SCALE
     ------------------------------------------------------------------------ */
  --z-header: 100;
  --z-mobile-menu: 200;
  --z-modal: 300;
  --z-skip-link: 999;
}