/**
 * @file
 * Design Tokens – Single source of truth for colors and typography.
 *
 * Change brand colors and font sizes here only. All other CSS should use
 * var(--color-*) and var(--font-size-*) (or semantic tokens below).
 *
 * Brand (Corrections):
 *   Blue:   #2A548A
 *   Green:  #5AA231
 *   Orange: #E74F15
 *   Grey:   #707070
 *   Body:   #333F48
 */

/* ==========================================================================
   Colors
   ========================================================================== */

:root {
  /* Brand */
  --color-brand-blue: #2A548A;
  --color-brand-secondary-blue: #3d6ba8;
  --color-brand-green: #5AA231;
  --color-brand-red: #c0392b;
  --color-brand-orange: #EB6F2D;
  --color-brand-grey: #707070;
  --color-brand-body: #333F48;
  --color-brand-white: #fff;
  --color-brand-orange-dark: #E74F15;
  --color-brand-orange-light: #EB6F2D;

  --color-brand-blue-rgb: 42, 84, 138;
  --color-brand-green-rgb: 90, 162, 49;
  --color-brand-orange-rgb: 231, 79, 21;

  /* Semantic neutrals (use these instead of hardcoded grays) */
  --color-text: var(--color-brand-body);
  --color-text-muted: #767676;
  --color-text-muted-alt: #7E7E7E;
  --color-text-muted-dark: #5E5E5E;
  --color-bg-subtle: #f5f5f5;
  --color-bg-lighter: #f2f2f2;
  --color-bg-light: #EAEDEF;
  --color-bg-dark: #1d1d1d;
  --color-black: #000;
  --color-border: #e5e5e5;
  --color-border-dark: #7C7C7C;
  --color-gray-mid: #707070;
  --color-gray-mid-rgb: 112, 112, 112;
  --color-gray-dark: #363636;
  --color-dark-slate: #2C2F34;
  --color-accent: #DE4C14;

  /* Main nav / Superfish menu */
  --color-nav: #666666;
  --text-nav: var(--font-size-sm);
  --line-height-nav: 1;


  /* Layout: container max-width */
  --container-max-width: 1440px;

  /* Paragraph section spacing */
  --paragraph-spacing: 4rem;
  --paragraph-spacing-mobile: 2.5rem;

  /* Document type icons (Resources view) */
  --color-doc-default: #dc3545;
  --color-doc-tech-specs: #0891b2;
  --color-doc-installation: #059669;
  --color-doc-warranty: #d97706;
  --color-doc-plan-view: #4f46e5;
  --color-doc-comparison: #7c3aed;
  --color-doc-maintenance: #0d9488;
  --color-doc-brochure: #ea580c;
}

/* ==========================================================================
   Typography scale (clamp for fluid sizing)
   ========================================================================== */

:root {
  --font-size-root: clamp(19px, calc(18px + 0.25vw), 21px);
  --font-size-xs: clamp(13px, calc(12px + 0.2vw), 14px);
  --font-size-sm: clamp(15px, calc(14px + 0.2vw), 16px);
  --font-size-base: clamp(17px, calc(16px + 0.3vw), 19px);
  --font-size-md: clamp(18px, calc(17px + 0.3vw), 20px);
  --font-size-lg: clamp(19px, calc(18px + 0.4vw), 22px);
  --font-size-xl: clamp(20px, calc(19px + 0.5vw), 24px);
  --font-size-2xl: clamp(22px, calc(20px + 0.6vw), 26px);
  --font-size-3xl: clamp(24px, calc(22px + 0.8vw), 30px);
  --font-size-4xl: clamp(28px, calc(26px + 1.2vw), 38px);
  --font-size-5xl: clamp(32px, calc(30px + 1.4vw), 44px);
  --font-size-6xl: clamp(38px, calc(34px + 1.8vw), 52px);
  --font-size-7xl: clamp(44px, calc(40px + 2.2vw), 62px);

  --line-height-tight: 1.2;
  --line-height-snug: 1.3;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.6;
  --line-height-loose: 1.8;

  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  --letter-spacing-tight: -0.025em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.025em;
  --letter-spacing-wider: 0.05em;
  --letter-spacing-widest: 0.1em;
}

/* ==========================================================================
   Semantic typography tokens
   ========================================================================== */

:root {
  --text-body: var(--font-size-base);
  --text-body-sm: var(--font-size-sm);
  --text-body-lg: var(--font-size-md);
  --text-label: var(--font-size-sm);
  --text-label-lg: var(--font-size-base);
  --text-caption: var(--font-size-xs);
  --text-heading-sm: var(--font-size-lg);
  --text-heading-md: var(--font-size-xl);
  --text-heading-lg: var(--font-size-3xl);
  --text-heading-xl: var(--font-size-4xl);
  --text-heading-hero: var(--font-size-6xl);
  --text-heading-hero-landing: clamp(4rem, 6vw, 6rem);
  --text-heading-landing-h2: clamp(2rem, 4vw, 4rem);
  --text-product-title: var(--font-size-md);
  --text-product-title-lg: var(--font-size-xl);
  --text-filter-label: var(--font-size-sm);
  --text-button: var(--font-size-base);
  --text-button-sm: var(--font-size-sm);
  --text-button-lg: var(--font-size-md);
}

/* ==========================================================================
   Base: html & body
   ========================================================================== */

html {
  font-size: var(--font-size-root);
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}

body {
  font-size: var(--font-size-base);
  line-height: var(--line-height-relaxed);
}

/* ==========================================================================
   Utility classes
   ========================================================================== */

.text-xs { font-size: var(--font-size-xs) !important; }
.text-sm { font-size: var(--font-size-sm) !important; }
.text-base { font-size: var(--font-size-base) !important; }
.text-md { font-size: var(--font-size-md) !important; }
.text-lg { font-size: var(--font-size-lg) !important; }
.text-xl { font-size: var(--font-size-xl) !important; }
.text-2xl { font-size: var(--font-size-2xl) !important; }
.text-3xl { font-size: var(--font-size-3xl) !important; }
.text-4xl { font-size: var(--font-size-4xl) !important; }
.text-5xl { font-size: var(--font-size-5xl) !important; }
.text-6xl { font-size: var(--font-size-6xl) !important; }
.text-7xl { font-size: var(--font-size-7xl) !important; }

.font-light { font-weight: var(--font-weight-light) !important; }
.font-normal { font-weight: var(--font-weight-normal) !important; }
.font-medium { font-weight: var(--font-weight-medium) !important; }
.font-semibold { font-weight: var(--font-weight-semibold) !important; }
.font-bold { font-weight: var(--font-weight-bold) !important; }

.leading-tight { line-height: var(--line-height-tight) !important; }
.leading-snug { line-height: var(--line-height-snug) !important; }
.leading-normal { line-height: var(--line-height-normal) !important; }
.leading-relaxed { line-height: var(--line-height-relaxed) !important; }
.leading-loose { line-height: var(--line-height-loose) !important; }

.tracking-tight { letter-spacing: var(--letter-spacing-tight) !important; }
.tracking-normal { letter-spacing: var(--letter-spacing-normal) !important; }
.tracking-wide { letter-spacing: var(--letter-spacing-wide) !important; }
.tracking-wider { letter-spacing: var(--letter-spacing-wider) !important; }
.tracking-widest { letter-spacing: var(--letter-spacing-widest) !important; }

.uppercase { text-transform: uppercase !important; }
.lowercase { text-transform: lowercase !important; }
.capitalize { text-transform: capitalize !important; }
.normal-case { text-transform: none !important; }

.text-left { text-align: left !important; }
.text-center { text-align: center !important; }
.text-right { text-align: right !important; }