/* ============================================
   NH INCOM — Design Tokens (CSS Custom Properties)
   Classic B2B Industrial Style
   ============================================ */

:root {
  /* ── Brand Colors ── */
  /* ponytail: muted navy palette — serious B2B industrial, not SaaS blue */
  --navy-900: #0B1D3A;
  --navy-800: #0F2647;
  --navy-700: #163560;
  --blue-600: #1B5EAB;
  --blue-500: #2670C4;
  --blue-100: #EDF2F8;
  --gold-500: #B8942E;
  --gold-400: #C9A94A;
  --gold-100: #F6F1E4;

  /* ── Neutrals ── */
  --text-900: #1A2332;
  --text-700: #3D4D63;
  --text-600: #5A6B80;
  --text-400: #8C99A8;
  --border: #CDD5DE;
  --border-light: #E2E8F0;
  --surface: #F4F6F8;
  --white: #FFFFFF;

  /* ── Feedback ── */
  --success: #1A7A52;
  --error: #A83232;
  --warning: #9A7610;

  /* ── Typography ── */
  --font-primary: 'Be Vietnam Pro', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-mono: 'Consolas', 'Courier New', monospace;

  /* Font sizes — restrained for professional look */
  --fs-hero: clamp(1.75rem, 2.5vw + 0.75rem, 2.75rem);
  --fs-h1: clamp(1.625rem, 2vw + 0.5rem, 2.375rem);
  --fs-h2: clamp(1.375rem, 1.5vw + 0.5rem, 1.875rem);
  --fs-h3: clamp(1.0625rem, 1vw + 0.25rem, 1.3125rem);
  --fs-h4: 1.0625rem;
  --fs-body: 0.9375rem;
  --fs-body-lg: 1.0625rem;
  --fs-small: 0.8125rem;
  --fs-xs: 0.75rem;

  /* Font weights */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* Line heights */
  --lh-tight: 1.25;
  --lh-snug: 1.4;
  --lh-normal: 1.65;
  --lh-relaxed: 1.8;

  /* ── Spacing ── */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  --space-4xl: 5rem;

  /* Section spacing */
  --section-py: clamp(2.5rem, 5vw, 4.5rem);
  --section-py-sm: clamp(1.5rem, 3vw, 3rem);

  /* ── Layout ── */
  --container-max: 1140px;
  --container-narrow: 800px;
  --container-px: clamp(1rem, 3vw, 2rem);
  --header-height: 64px;

  /* ── Borders & Radii ── */
  /* ponytail: sharp corners = industrial/professional; upgrade to 8px if client wants softer */
  --radius-sm: 3px;
  --radius-md: 4px;
  --radius-lg: 6px;
  --radius-xl: 6px;
  --radius-full: 9999px;

  /* ── Shadows — subtle, no dramatic lifts ── */
  --shadow-sm: 0 1px 2px rgba(11, 29, 58, 0.05);
  --shadow-md: 0 2px 6px rgba(11, 29, 58, 0.07);
  --shadow-lg: 0 4px 12px rgba(11, 29, 58, 0.08);
  --shadow-xl: 0 8px 20px rgba(11, 29, 58, 0.1);
  --shadow-card: 0 1px 3px rgba(11, 29, 58, 0.06);

  /* ── Transitions — quick and subtle ── */
  --transition-fast: 120ms ease;
  --transition-base: 200ms ease;
  --transition-slow: 300ms ease;

  /* ── Z-index scale ── */
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-overlay: 300;
  --z-modal: 400;
  --z-floating: 500;
  --z-toast: 600;
}