/* =============================================================
   Powers Interactive CIM — Base design tokens
   Source of truth: extracted from Powers_Interactive_Technology_Platform_CIM_v6.html
   See docs/DESIGN_SYSTEM.md for rationale.
   ============================================================= */

:root {
  /* Colors */
  --navy: #0C2248;
  --navy-ink: #07152E;
  --blue: #174EA6;
  --blue-deep: #0F3A86;
  --red: #EF4D5A;
  --teal: #0D8B8B;
  --green: #15803D;
  --orange: #D97706;
  --text: #0B1220;
  --muted: #5B6578;
  --muted-2: #8089A0;
  --line: rgba(15, 23, 42, 0.08);
  --line-strong: rgba(15, 23, 42, 0.14);
  --bg: #F4F6FB;
  --surface: rgba(255, 255, 255, 0.82);
  --surface-strong: #FFFFFF;

  /* Shadows */
  --shadow-card: 0 1px 2px rgba(12, 34, 72, 0.05), 0 12px 32px rgba(12, 34, 72, 0.08);
  --shadow-dark: 0 10px 40px rgba(7, 21, 46, 0.40), 0 2px 6px rgba(7, 21, 46, 0.18);
  --shadow-lift: 0 4px 24px rgba(12, 34, 72, 0.12);

  /* Radius */
  --radius: 22px;
  --radius-sm: 14px;
  --radius-pill: 999px;

  /* Fonts */
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, Monaco, Consolas, monospace;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  background: var(--bg);
  color: var(--text);
  font-feature-settings: 'ss01', 'cv11';
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
  color: var(--text);
  letter-spacing: -0.025em;
  font-weight: 800;
  text-wrap: balance;
}

.hero-title {
  font-size: clamp(60px, 5.5vw, 84px);
  font-weight: 800;
  line-height: 0.96;
  letter-spacing: -0.035em;
}

.slide-title,
.section-title {
  font-size: clamp(32px, 3.8vw, 54px);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.025em;
  max-width: 1100px;
}

.subtitle {
  font-size: clamp(17px, 1.55vw, 22px);
  font-weight: 400;
  color: var(--muted);
  line-height: 1.45;
  max-width: 960px;
  text-wrap: balance;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 18px;
}

.eyebrow::before {
  content: "";
  display: inline-block;
  width: 22px;
  height: 2px;
  background: var(--red);
  border-radius: 1px;
}

/* Numeric hierarchy */
.metric-number {
  font-size: clamp(40px, 4.5vw, 64px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.0;
  color: var(--text);
}

.metric-label {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 8px;
}

.stat {
  font-weight: 700;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
}
.stat.blue { color: var(--blue); }
.stat.green { color: var(--green); }
.stat.red { color: var(--red); }

/* Link styles */
a {
  color: var(--blue);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s;
}
a:hover {
  border-bottom-color: var(--blue);
}

/* Selection */
::selection {
  background: rgba(23, 78, 166, 0.18);
  color: var(--navy);
}