/**
 * @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).
 *
 * ProPipe North America Brand Palette:
 *   Red:          #D22730
 *   Reflex Blue:  #001489
 *   Bright Blue:  #0096FF
 *   Accent Orange:#FF7A00
 *   Light Gray:   #E8E8E8
 *   Mid Gray:     #BDBDBD
 *   Dark Gray:    #3E4445
 */

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

:root {
  /* ── ProPipe brand palette ── */
  --pp-red: #D22730;
  --pp-reflex-blue: #001489;
  --pp-bright-blue: #0096FF;
  --pp-orange: #FF7A00;
  --pp-light-gray: #E8E8E8;
  --pp-mid-gray: #BDBDBD;
  --pp-dark-gray: #3E4445;
  --pp-white: #fff;

  /* RGB channels for rgba() usage */
  --pp-red-rgb: 210, 39, 48;
  --pp-reflex-blue-rgb: 0, 20, 137;
  --pp-bright-blue-rgb: 0, 150, 255;
  --pp-orange-rgb: 255, 122, 0;
  --pp-dark-gray-rgb: 62, 68, 69;

  /* Hover/active shades (darkened ~15%) */
  --pp-red-dark: #B01E26;
  --pp-reflex-blue-dark: #000F66;
  --pp-bright-blue-dark: #007ACC;
  --pp-orange-dark: #D96800;
  --pp-dark-gray-dark: #2A2F30;

  /* ── Semantic aliases (used throughout existing CSS) ── */
  --color-brand-blue: var(--pp-reflex-blue);
  --color-brand-secondary-blue: var(--pp-bright-blue);
  --color-brand-red: var(--pp-red);
  --color-brand-body: var(--pp-dark-gray);
  --color-brand-white: #fff;
  --color-brand-green: #9fcd4e;
  --color-brand-green-dark: #61ac45;
  --color-brand-green-rgb: 159, 205, 78;
  --color-brand-blue-rgb: 0, 20, 137;

  /* Semantic neutrals */
  --color-text: var(--pp-dark-gray);
  --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: var(--pp-light-gray);
  --color-bg-dark: #1d1d1d;
  --color-black: #000;
  --color-border: #e5e5e5;
  --color-border-dark: #7C7C7C;
  --color-gray-mid: var(--pp-mid-gray);
  --color-gray-mid-rgb: 189, 189, 189;
  --color-gray-dark: var(--pp-dark-gray);
  --color-dark-slate: #2C2F34;
  --color-accent: var(--pp-orange);

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

  /* Layout: container max-width.
     Must match the theme's .container width (set in local-theme.css).
     Used by paragraphs.css to constrain BP types inside page-paragraphs-sections. */
  --container-max-width: 1440px;

  /* Paragraph section spacing
     Controls vertical padding inside every OFES paragraph type.
     Adjust these two values to tighten or loosen spacing site-wide.
     Previous values: 8rem desktop, 4rem mobile — felt too aggressive. */
  --paragraph-spacing: 4rem;         /* Desktop (≥769px) */
  --paragraph-spacing-mobile: 2.5rem;  /* Mobile  (≤768px) */
}

/* ==========================================================================
   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-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; }