/* ================================================================
   VEXTATECH FEDERAL — Design Tokens
   ================================================================
   Single source of truth for ALL visual decisions.
   Change one value here → updates everywhere on the site.

   PHASE 2: Add dark/light theme toggle by swapping :root values
   PHASE 3: Export these as JS tokens for React components
   ================================================================ */

:root {

  /* ── COLORS ─────────────────────────────────────────────────── */

  /* Backgrounds — layered depth system (matches business card dark) */
  --clr-bg:          #1a2332;   /* Base page background */
  --clr-surface:     #1e2a3a;   /* Cards, sections */
  --clr-surface-2:   #243040;   /* Elevated / hover states */
  --clr-surface-3:   #2d3d52;   /* Modals, dropdowns (Phase 2) */
  --clr-nav:         rgba(26, 35, 50, 0.94); /* Nav with blur */

  /* Teal accent — matches business card "FEDERAL" + title color */
  --clr-accent:        #00bcd4;
  --clr-accent-dim:    #0097a7;
  --clr-accent-bright: #26c6da;
  --clr-accent-alpha:  rgba(0, 188, 212, 0.10);
  --clr-accent-border: rgba(0, 188, 212, 0.28);
  --clr-accent-glow:   0 0 28px rgba(0, 188, 212, 0.22);

  /* Text */
  --clr-text:           #ffffff;
  --clr-text-secondary: #b0bec5;   /* Silver — matches business card subtext */
  --clr-text-muted:     #78909c;

  /* Borders */
  --clr-border:         rgba(255, 255, 255, 0.07);
  --clr-border-accent:  rgba(0, 188, 212, 0.30);

  /* Status (Phase 2: alerts, compliance badges) */
  --clr-success: #4caf50;
  --clr-warning: #ff9800;
  --clr-danger:  #f44336;

  /* ── TYPOGRAPHY ──────────────────────────────────────────────── */

  /* Rajdhani = the military-geometric font from the business card */
  /* Inter     = clean readable body font                          */
  --font-display: 'Rajdhani', sans-serif;
  --font-body:    'Inter', sans-serif;

  /* Fluid type scale — scales with viewport, no media query needed */
  --text-xs:   clamp(0.65rem,  0.9vw,  0.75rem);
  --text-sm:   clamp(0.78rem,  1.1vw,  0.875rem);
  --text-base: clamp(0.9rem,   1.3vw,  1rem);
  --text-lg:   clamp(1rem,     1.5vw,  1.125rem);
  --text-xl:   clamp(1.1rem,   1.8vw,  1.25rem);
  --text-2xl:  clamp(1.25rem,  2.2vw,  1.5rem);
  --text-3xl:  clamp(1.5rem,   2.8vw,  1.875rem);
  --text-4xl:  clamp(1.875rem, 3.5vw,  2.5rem);
  --text-5xl:  clamp(2.25rem,  4.5vw,  3.5rem);
  --text-hero: clamp(2.75rem,  6.5vw,  5rem);

  /* Weights */
  --fw-light:    300;
  --fw-normal:   400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* Letter spacing */
  --ls-tight:   -0.02em;
  --ls-normal:   0em;
  --ls-wide:     0.05em;
  --ls-wider:    0.10em;
  --ls-widest:   0.20em;
  --ls-extreme:  0.32em;  /* Used on "FEDERAL" style labels */

  /* ── SPACING ─────────────────────────────────────────────────── */

  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.25rem;
  --sp-6:  1.5rem;
  --sp-8:  2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-20: 5rem;
  --sp-24: 6rem;
  --sp-32: 8rem;

  /* Section vertical padding — fluid */
  --section-pad: clamp(5rem, 9vw, 8rem);

  /* ── LAYOUT ──────────────────────────────────────────────────── */

  --container:    1200px;
  --container-sm: 760px;
  --nav-h:        84px;

  /* ── BORDERS ─────────────────────────────────────────────────── */

  --r-xs:   2px;
  --r-sm:   4px;
  --r-md:   8px;
  --r-lg:   12px;
  --r-xl:   16px;
  --r-full: 9999px;

  /* ── SHADOWS ─────────────────────────────────────────────────── */

  --shadow-sm:   0 2px 8px  rgba(0, 0, 0, 0.25);
  --shadow-md:   0 4px 20px rgba(0, 0, 0, 0.35);
  --shadow-lg:   0 8px 40px rgba(0, 0, 0, 0.45);
  --shadow-teal: 0 0 28px   rgba(0, 188, 212, 0.22);
  --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.4),
                 inset 0 1px 0 rgba(255, 255, 255, 0.04);

  /* ── TRANSITIONS ─────────────────────────────────────────────── */

  --ease:      cubic-bezier(0.16, 1, 0.3, 1);
  --ease-io:   cubic-bezier(0.45, 0, 0.55, 1);
  --t-fast:    150ms;
  --t-base:    250ms;
  --t-slow:    400ms;
  --t-slower:  650ms;
}