/* === css/intel-building/base/variables.css === v1.1.0 ===
   Intel Building (new theme) — shared design tokens.
   Single source of truth for colors/type/spacing across every intel-building
   stylesheet (layout/, components/, pages/). Extracted out of intel-home.css
   so header.css and future component files don't duplicate/drift from it.
   Isolated from the legacy KIBMS theme — do not merge with welcome.css.

   v1.1.0: merged --header-container-max into --container-max (1224px) —
   the header's container is now the one page-wide container every section
   uses, not a header-specific value other sections had to match by hand. */

:root {
  /* Brand */
  --color-primary: #FE6601;
  --color-primary-hover: #E55A00;
  --color-primary-light: rgba(254, 102, 1, 0.08);

  /* Neutrals */
  --color-dark: #0D1217;
  --color-dark-elevated: #171F27;
  --color-black: #000000;

  /* Text */
  --color-text-primary: #0D1217;
  --color-text-secondary: #4B5565;
  --color-text-muted: #7A8494;
  --color-text-inverse: #FFFFFF;
  --color-text-inverse-secondary: rgba(255, 255, 255, 0.72);

  /* Background */
  --color-bg-page: #FDF6F4;
  --color-bg-alt: #FFF7F2;
  --color-bg-surface: #FFFFFF;
  --color-bg-dark: #0D1217;
  --color-bg-black: #000000;

  /* Border */
  --color-border: #ECE3DC;
  --color-border-light: #fff;
  --color-border-dark: rgba(255, 255, 255, 0.12);

  /* Semantic */
  --color-success: #22C55E;

  /* Typography */
  --font-heading: 'Inter', -apple-system, sans-serif;
  --font-body: 'Inter', -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', 'Courier New', monospace;
  --font-serif: 'Instrument Serif', Georgia, 'Times New Roman', serif;

  --text-xs: 12px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-lg: 18px;
  --text-xl: 20px;
  --text-2xl: 24px;
  --text-3xl: 30px;
  --text-4xl: 36px;
  --text-5xl: 44px;
  --text-6xl: 52px;
  --text-hero: 52px;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-extrabold: 800;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  --shadow-card: 0 20px 45px rgba(13, 18, 23, 0.08);
  --shadow-pop: 0 12px 32px rgba(13, 18, 23, 0.14);

  /* Site-wide container — figma-ui-folder/screens/Frame 2.png / "Wireframe - 7"
     node "Frame 2": 1200px content + Bootstrap's default 24px container gutter
     (2 x 12px) = 1224px, so the header pill (and now every other section using
     .plx-container) lands at exactly 1200px wide, matching the fig node. Every
     section shares this one token rather than its own width. */
  --container-max: 1224px;

  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;

  --header-height: 62px;
  --header-top-offset: 40px;
}