/* ==========================================================================
   Watt Security — CSS Variables (Design Tokens)
   Single source of truth for color, typography, spacing, radius, shadow,
   and motion values. Every value below is taken directly from the design
   system (design/COLOR_PALETTE.md, TYPOGRAPHY.md, SPACING.md, ANIMATIONS.md)
   — no new values are introduced here.
   No selectors targeting actual elements belong in this file.
   ========================================================================== */

:root {
  /* ---- Color: Primary / Secondary / Accent (design/COLOR_PALETTE.md) ---- */
  --color-navy: #0B1A33;
  --color-navy-light: #13284D;
  --color-navy-deep: #08131F;
  --color-slate: #2C3440;
  --color-gold: #B8933E;
  --color-gold-deep: #96762E;

  /* ---- Color: Semantic ---- */
  --color-success: #2E7D32;
  --color-error: #B3261E;
  --color-warning: #B26A00;

  /* ---- Color: Backgrounds ---- */
  --color-bg-light: #F7F7F5;
  --color-bg-light-alt: #EDEEF0;
  --color-bg-dark: #08131F;

  /* ---- Color: Text ---- */
  --color-text-ink: #12151A;
  --color-text-graphite: #5B6472;
  --color-text-offwhite: #F2F3F5;
  --color-text-cool-gray: #9AA3B2;

  /* ---- Color: Borders ---- */
  --color-border-light: #DFE2E6;
  --color-border-dark: #2A3548;

  /* ---- Typography: Font Families (design/TYPOGRAPHY.md) ---- */
  --font-heading: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'Inter', 'Helvetica Neue', Arial, sans-serif;

  /* ---- Typography: Font Weights ---- */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;

  /* ---- Typography: Font Sizes (desktop scale) ---- */
  --fs-h1: 3.5rem;      /* 56px */
  --fs-h2: 2.5rem;      /* 40px */
  --fs-h3: 1.875rem;    /* 30px */
  --fs-h4: 1.5rem;      /* 24px */
  --fs-h5: 1.25rem;     /* 20px */
  --fs-h6: 1rem;        /* 16px, eyebrow/label use per design/TYPOGRAPHY.md */
  --fs-body-lg: 1.1875rem; /* 19px */
  --fs-body: 1rem;      /* 16px */
  --fs-body-sm: 0.875rem;  /* 14px */

  /* ---- Typography: Font Sizes (mobile scale) ---- */
  --fs-h1-mobile: 2.125rem;  /* 34px */
  --fs-h2-mobile: 1.75rem;   /* 28px */
  --fs-h3-mobile: 1.375rem;  /* 22px */
  --fs-h4-mobile: 1.1875rem; /* 19px */
  --fs-h5-mobile: 1.0625rem; /* 17px */
  --fs-h6-mobile: 0.875rem;  /* 14px */
  --fs-body-lg-mobile: 1.0625rem; /* 17px */
  --fs-body-mobile: 0.9375rem;    /* 15px */
  --fs-body-sm-mobile: 0.8125rem; /* 13px */

  /* ---- Typography: Component-Specific Sizes (added Milestone 6, values
     sourced directly from the "Navigation" and "Buttons/CTA" rows of
     design/TYPOGRAPHY.md, not previously tokenized) ---- */
  --fs-nav: 0.9375rem;         /* 15px — desktop navigation */
  --fs-nav-mobile: 1rem;       /* 16px — mobile menu */
  --ls-nav: 0.25px;
  --fs-button: 1rem;           /* 16px — desktop */
  --fs-button-mobile: 0.9375rem; /* 15px — mobile */
  --ls-button: 0.5px;

  /* ---- Spacing Scale (design/SPACING.md — 8px base unit) ---- */
  --space-xxs: 0.25rem;  /* 4px */
  --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 */
  --space-4xl: 8rem;     /* 128px */

  /* ---- Radius & Shadow (per design/UI_COMPONENTS.md: small radius, subtle shadow) ---- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --shadow-sm: 0 1px 2px rgba(8, 19, 31, 0.08);
  --shadow-md: 0 4px 12px rgba(8, 19, 31, 0.10);

  /* ---- Motion (design/ANIMATIONS.md) ---- */
  --duration-fast: 180ms;
  --duration-base: 220ms;
  --duration-slow: 300ms;
  --ease-out: ease-out;
  --ease-in-out: ease-in-out;

  /* ---- Content Width (design/SPACING.md) ---- */
  --content-max-width: 1280px;

  /* ---- Z-Index Scale (added Milestone 6, for header stacking) ---- */
  --z-header: 100;
  --z-skip-link: 1000;
}

/* ==========================================================================
   Breakpoint reference (documentation only — NOT usable inside @media
   conditions, per architecture/CSS_ARCHITECTURE.md). Every media query in
   this project must use these exact literal values:
     Mobile Large : 600px
     Tablet       : 768px
     Desktop      : 1024px
     Large Desktop: 1440px
   ========================================================================== */