/* =====================================================================
   INTELLIGENT IT — BRAND TOKENS (Doc A canonical, 2026-05-07)
   Single source of truth for color, type, spacing, and core components.
   Mirrors the live site (intelligentit.io / mroot2025.github.io/intelligentio).
   Link this file with: <link rel="stylesheet" href="brand/brand-tokens.css">
   Use vars only — never paste raw hex values.
   Doc A canonical: Geist Sans + Geist Mono · #05D2AB primary mint ·
   ig-logo.png brand mark · "Intelligent IT" wordmark casing · dark mode default.
===================================================================== */

:root {
  /* ---------- ACCENT (mint family) — primary brand color (Doc A: #05D2AB) ---------- */
  --iit-teal-300: #6FF2D6;   /* glow, faint backgrounds (lighter step from #05D2AB) */
  --iit-teal-400: #05D2AB;   /* PRIMARY accent — buttons, links, eyebrow, stats */
  --iit-teal-500: #04B596;   /* hover state, inline accent */
  --iit-teal-700: #038A73;   /* gradient endpoint, deep accent */
  --iit-teal-900: #1e4c4a;   /* solution-card gradient end, deep surface */

  /* ---------- BLUE (gradient companion) ---------- */
  --iit-blue-500: #1b5ace;   /* hero/CTA gradient start */
  --iit-blue-600: #006ab1;   /* IntelligentView gradient end */
  --iit-blue-900: #155065;   /* solution-card gradient start */

  /* ---------- INK (dark-mode surfaces — DEFAULT, Doc A gradient #0A0F14 → #1B232C) ---------- */
  --iit-ink-bg:   #0A0F14;   /* page background (Doc A) */
  --iit-ink-900: #0A0F14;
  --iit-ink-800: #1B232C;    /* card / dropdown surface, button text on light (Doc A) */
  --iit-ink-700: #232323;    /* elevated surface */

  /* ---------- TEXT ---------- */
  --iit-text-primary:   #ffffff;
  --iit-text-body:      #edeff7;   /* lightest gray-blue — body copy */
  --iit-text-secondary: #dde1ed;   /* card body, dropdown labels */
  --iit-text-muted:     #bcbfcc;   /* meta, captions, inactive */
  --iit-text-quote:     #cfdffe;   /* quote glyph, decorative */

  /* ---------- HAIRLINES & GLASS ---------- */
  --iit-line-soft:    rgba(255, 255, 255, 0.06);
  --iit-line-medium:  rgba(255, 255, 255, 0.1);
  --iit-line-strong:  rgba(255, 255, 255, 0.15);
  --iit-glass-04:     rgba(255, 255, 255, 0.04);
  --iit-glass-06:     rgba(255, 255, 255, 0.06);
  --iit-glass-10:     rgba(255, 255, 255, 0.10);
  --iit-teal-glass:   rgba(5, 210, 171, 0.10);
  --iit-teal-glow:    rgba(5, 210, 171, 0.30);

  /* ---------- LIGHT-MODE SURFACES (rare — print, email, light docs) ---------- */
  --iit-white:      #ffffff;
  --iit-paper:      #f7f8fb;
  --iit-paper-200:  #edeff7;
  --iit-paper-400:  #bcbfcc;

  /* ---------- STATUS (security/compliance signals only) ---------- */
  --iit-status-ok:    #05D2AB;
  --iit-status-warn:  #f4c430;
  --iit-status-risk:  #ff6b6b;
  --iit-status-info:  #1b5ace;

  /* ---------- GRADIENTS (use these three only) ---------- */
  --iit-gradient-hero:    linear-gradient(135deg, #1b5ace 0%, #00b19b 100%);
  --iit-gradient-iv:      linear-gradient(135deg, #00b19b 0%, #006ab1 100%);
  --iit-gradient-card:    linear-gradient(135deg, #155065 0%, #1e4c4a 100%);

  /* ---------- TYPE (Doc A canonical: Geist Sans + Geist Mono, 2026-05-07) ---------- */
  --iit-font-sans: 'Geist', 'Geist Variable', -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --iit-font-mono: 'Geist Mono', 'Geist Mono Variable', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Display scale — matches live site */
  --iit-fs-h1:        56px;   /* hero / page title */
  --iit-fs-h2:        44px;   /* section headers */
  --iit-fs-h2-large:  48px;   /* AI-support style */
  --iit-fs-h3:        36px;   /* tab content / sub-section */
  --iit-fs-h4:        24px;   /* card titles */
  --iit-fs-h5:        20px;   /* small card title, dashboard label */
  --iit-fs-stat:      48px;   /* numeric statistic */
  --iit-fs-stat-lg:   60px;
  --iit-fs-body-lg:   18px;
  --iit-fs-body:      16px;
  --iit-fs-meta:      14px;
  --iit-fs-fine:      13px;
  --iit-fs-eyebrow:   14px;
  --iit-fs-button-lg: 20px;
  --iit-fs-button:    16px;

  /* ---------- SPACING (8pt grid) ---------- */
  --iit-space-1:  4px;
  --iit-space-2:  8px;
  --iit-space-3:  12px;
  --iit-space-4:  16px;
  --iit-space-5:  20px;
  --iit-space-6:  24px;
  --iit-space-8:  32px;
  --iit-space-10: 40px;
  --iit-space-12: 48px;
  --iit-space-15: 60px;
  --iit-space-20: 80px;
  --iit-space-24: 100px;
  --iit-space-30: 120px;

  --iit-section-pad-y:  100px;
  --iit-container-max:  1280px;
  --iit-container-pad:  40px;

  /* ---------- RADIUS ---------- */
  --iit-radius-sm:    8px;
  --iit-radius-md:    12px;
  --iit-radius-lg:    16px;
  --iit-radius-xl:    24px;
  --iit-radius-pill:  50px;   /* canonical button shape */

  /* ---------- SHADOWS (used sparingly — dark UI prefers borders) ---------- */
  --iit-shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.20);
  --iit-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.25);
  --iit-shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.35);
  --iit-shadow-glow: 0 0 32px rgba(5, 210, 171, 0.15);

  /* ---------- MOTION ---------- */
  --iit-ease:       cubic-bezier(0.4, 0, 0.2, 1);
  --iit-duration:   0.3s;
}

/* ===================================================================
   BASE — apply on body/html for dark-mode-first design
=================================================================== */
.iit-base {
  font-family: var(--iit-font-sans);
  background: var(--iit-ink-bg);
  color: var(--iit-text-primary);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* ===================================================================
   TYPOGRAPHY HELPERS
=================================================================== */
.iit-eyebrow {
  font-family: var(--iit-font-sans);
  font-size: var(--iit-fs-eyebrow);
  font-weight: 600;
  color: var(--iit-teal-400);
  text-transform: uppercase;
  letter-spacing: 1.5px;
}

.iit-h1 {
  font-size: var(--iit-fs-h1);
  font-weight: 600;
  line-height: 1.15;
  text-wrap: balance;
}
.iit-h2 {
  font-size: var(--iit-fs-h2);
  font-weight: 600;
  line-height: 1.2;
  text-wrap: balance;
}
.iit-h3 {
  font-size: var(--iit-fs-h3);
  font-weight: 600;
  line-height: 1.25;
}
.iit-body {
  font-size: var(--iit-fs-body-lg);
  color: var(--iit-text-body);
  line-height: 1.6;
  text-wrap: pretty;
}
.iit-meta {
  font-size: var(--iit-fs-meta);
  color: var(--iit-text-muted);
}

/* ===================================================================
   BUTTONS — pill-shaped, 50px radius is canonical
=================================================================== */
.iit-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--iit-space-2);
  font-family: var(--iit-font-sans);
  font-weight: 500;
  font-size: var(--iit-fs-button);
  border-radius: var(--iit-radius-pill);
  padding: 12px 28px;
  min-height: 44px;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: all var(--iit-duration) var(--iit-ease);
  white-space: nowrap;
  text-decoration: none;
}
.iit-btn--lg { padding: 16px 36px; font-size: var(--iit-fs-button-lg); min-height: 48px; }
.iit-btn--sm { padding: 10px 24px; font-size: var(--iit-fs-button); min-height: 44px; }

/* PRIMARY on dark — white pill (most common CTA on the live site) */
.iit-btn-primary {
  background: var(--iit-text-primary);
  color: var(--iit-ink-900);
}
.iit-btn-primary:hover { background: var(--iit-paper-200); }

/* TEAL — used for accent CTA (e.g. "Try IntelligentView") */
.iit-btn-teal {
  background: var(--iit-teal-400);
  color: var(--iit-ink-800);
}
.iit-btn-teal:hover { background: var(--iit-teal-500); }

/* OUTLINE TEAL — secondary on dark */
.iit-btn-outline-teal {
  background: transparent;
  color: var(--iit-teal-400);
  border-color: var(--iit-teal-400);
}
.iit-btn-outline-teal:hover { background: var(--iit-teal-glass); }

/* OUTLINE WHITE — secondary on gradient */
.iit-btn-outline-white {
  background: transparent;
  color: var(--iit-text-primary);
  border-color: var(--iit-text-primary);
}
.iit-btn-outline-white:hover { background: var(--iit-glass-10); }

/* GHOST link */
.iit-link-teal {
  color: var(--iit-teal-400);
  font-weight: 500;
  text-decoration: none;
  transition: color var(--iit-duration);
}
.iit-link-teal:hover { color: var(--iit-teal-500); }

/* ===================================================================
   CARDS — glass borders on dark, no heavy shadows
=================================================================== */
.iit-card {
  background: linear-gradient(135deg, var(--iit-glass-04) 0%, rgba(255,255,255,0.01) 100%);
  border: 1px solid var(--iit-line-soft);
  border-radius: var(--iit-radius-lg);
  padding: var(--iit-space-8);
  transition: all var(--iit-duration) var(--iit-ease);
}
.iit-card:hover {
  border-color: var(--iit-teal-glow);
  transform: translateY(-4px);
}

.iit-card-solid {
  background: var(--iit-ink-800);
  border: 1px solid var(--iit-line-soft);
  border-radius: var(--iit-radius-lg);
  padding: var(--iit-space-8);
}

.iit-card-gradient {
  background: var(--iit-gradient-card);
  border: 1px solid var(--iit-line-soft);
  border-radius: var(--iit-radius-lg);
  padding: var(--iit-space-8);
}

/* ===================================================================
   PILLS / BADGES — for trust badges, tags, labels
=================================================================== */
.iit-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--iit-space-2);
  padding: 8px 16px;
  border-radius: var(--iit-radius-pill);
  background: var(--iit-glass-10);
  border: 1px solid var(--iit-line-strong);
  font-size: var(--iit-fs-meta);
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
}

.iit-pill-teal {
  display: inline-block;
  padding: 4px 12px;
  border-radius: var(--iit-radius-pill);
  background: rgba(5, 210, 171, 0.15);
  color: var(--iit-teal-400);
  font-size: 12px;
  font-weight: 600;
}

.iit-tag {
  padding: 8px 16px;
  border-radius: var(--iit-radius-pill);
  border: 1px solid var(--iit-line-strong);
  font-size: var(--iit-fs-meta);
  color: var(--iit-text-muted);
  cursor: pointer;
  transition: all var(--iit-duration);
}
.iit-tag:hover, .iit-tag.is-active {
  color: var(--iit-teal-400);
  border-color: var(--iit-teal-400);
}

/* ===================================================================
   STATS — large teal numbers
=================================================================== */
.iit-stat-num {
  display: block;
  font-size: var(--iit-fs-stat);
  font-weight: 600;
  color: var(--iit-teal-400);
  line-height: 1;
  letter-spacing: -0.02em;
}
.iit-stat-label {
  font-size: var(--iit-fs-body);
  color: var(--iit-text-primary);
  margin-top: var(--iit-space-2);
}

/* ===================================================================
   GRADIENT BACKGROUNDS — for hero / CTA / feature sections
=================================================================== */
.iit-bg-hero {
  position: relative;
  background: var(--iit-gradient-hero);
}
.iit-bg-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 70% 50%, rgba(101, 255, 227, 0.15) 0%, transparent 60%);
  pointer-events: none;
}
.iit-bg-iv     { background: var(--iit-gradient-iv); }

/* ===================================================================
   CONTAINER
=================================================================== */
.iit-container {
  max-width: var(--iit-container-max);
  margin: 0 auto;
  padding: 0 var(--iit-container-pad);
}
.iit-section { padding: var(--iit-section-pad-y) 0; }