/* ============================================================
   PINNACLE SIGNWORKS — DESIGN TOKENS
   Single source of truth for colors, typography, spacing.
   ============================================================ */

:root {
  /* ---- Brand colors (sampled from logo) ---- */
  --brand-blue: #1E2EA0;
  --brand-blue-hover: #1A2789;
  --ink: #0E1850;
  --ink-soft: #1A2563;

  /* ---- Accent (safety orange from logo) ---- */
  --accent: #E94E1B;
  --accent-hover: #C7400E;

  /* ---- Neutrals ---- */
  --bone: #F7F5F1;
  --surface: #FFFFFF;
  --steel: #5C6B7A;
  --steel-soft: #8A95A0;
  --divider: #E2DED7;
  --divider-dark: rgba(255, 255, 255, 0.12);

  /* ---- Text ---- */
  --text-on-light: #14213D;
  --text-soft-on-light: #5C6B7A;
  /* Pure white on dark backgrounds — non-transparent for clean mobile readability */
  --text-on-dark: #ffffff;
  --text-soft-on-dark: #ffffff;

  /* ---- Typography ---- */
  --font-display: 'Inter Tight', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;

  /* Type scale (desktop) */
  --fs-display: clamp(2.75rem, 6vw, 5rem);   /* H1 hero */
  --fs-h2: clamp(2rem, 4vw, 3.5rem);
  --fs-h3: clamp(1.5rem, 2.5vw, 2rem);
  --fs-h4: 1.25rem;
  --fs-body-lg: 1.125rem;
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-caption: 0.8125rem;
  --fs-mono: 0.9375rem;

  /* Line heights */
  --lh-tight: 1.05;
  --lh-snug: 1.2;
  --lh-normal: 1.5;
  --lh-relaxed: 1.7;

  /* ---- Spacing scale ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;
  --space-11: 10rem;

  /* ---- Layout ---- */
  --container-max: 1280px;
  --container-narrow: 920px;
  --content-padding-x: clamp(1.25rem, 5vw, 3rem);

  /* ---- Radii ---- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* ---- Shadows ---- */
  --shadow-sm: 0 1px 2px rgba(14, 24, 80, 0.06);
  --shadow-md: 0 4px 12px rgba(14, 24, 80, 0.08);
  --shadow-lg: 0 12px 32px rgba(14, 24, 80, 0.12);
  --shadow-xl: 0 24px 64px rgba(14, 24, 80, 0.16);

  /* ---- Transitions ---- */
  --t-fast: 150ms ease;
  --t-base: 250ms ease;
  --t-slow: 400ms cubic-bezier(0.25, 0.1, 0.25, 1);

  /* ---- Z-index ---- */
  --z-nav: 100;
  --z-modal: 200;
}