/* =========================================================
   00 — DESIGN TOKENS
   PURPOSE: Brand colors, spacing, radius, shadows, widths, and shared values.
   DEVELOPER NOTE:
   - Add new tokens only when reused across multiple files/pages.
   - Prefer --cpc-* tokens for new work.
   - Legacy aliases are kept so older markup can survive during migration.
   ========================================================= */

:root {
  /* Brand */
  --cpc-primary: #0A4FA3;
  --cpc-primary-bright: #2458F2;
  --cpc-secondary: #4D77C2;
  --cpc-accent-gold: #C9A43E;
  --cpc-accent-warm: #E2A24F;

  /* Text */
  --cpc-ink: #07184A;
  --cpc-text: #24345F;
  --cpc-body: #222222;
  --cpc-muted: #52627F;
  --cpc-soft-text: #31466E;
  --cpc-legal: #666666;

  /* Surfaces */
  --cpc-bg: #F5F7FA;
  --cpc-soft: #F8FBFF;
  --cpc-soft-blue: #EEF5FF;
  --cpc-card: #FFFFFF;
  --cpc-white: #FFFFFF;
  --cpc-cream: #FFFDF7;

  /* Borders */
  --cpc-line: #DDE8FA;
  --cpc-line-soft: #E6ECF6;
  --cpc-line-strong: #D8E4F4;

  /* Shape */
  --cpc-radius-sm: 12px;
  --cpc-radius-md: 16px;
  --cpc-radius-lg: 22px;
  --cpc-radius-xl: 28px;
  --cpc-radius-pill: 999px;

  /* Shadows */
  --cpc-shadow-sm: 0 6px 18px rgba(7, 24, 74, 0.05);
  --cpc-shadow-md: 0 14px 35px rgba(7, 24, 74, 0.08);
  --cpc-shadow-lg: 0 22px 60px rgba(7, 24, 74, 0.12);
  --cpc-shadow-blue: 0 18px 42px rgba(10, 79, 163, 0.12);

  /* Width + rhythm */
  --cpc-max: 1080px;
  --cpc-wide: 1180px;
  --cpc-ultra: 1280px;
  --cpc-pad: 24px;
  --cpc-section-y: clamp(34px, 5vw, 68px);

  /* Type scale */
  --cpc-h1: clamp(2.15rem, 4vw, 4.35rem);
  --cpc-h2: clamp(1.55rem, 2.8vw, 2.6rem);
  --cpc-h3: clamp(1.15rem, 1.8vw, 1.45rem);
  --cpc-lead: clamp(1.02rem, 1.4vw, 1.2rem);
  --cpc-small: 0.9rem;

  /* Legacy aliases kept during migration */
  --cprx-primary: var(--cpc-primary);
  --cprx-primary-bright: var(--cpc-primary-bright);
  --cprx-secondary: var(--cpc-secondary);
  --cprx-ink: var(--cpc-ink);
  --cprx-text: var(--cpc-text);
  --cprx-body: var(--cpc-body);
  --cprx-muted: var(--cpc-muted);
  --cprx-legal: var(--cpc-legal);
  --cprx-bg: var(--cpc-bg);
  --cprx-soft: var(--cpc-soft);
  --cprx-soft-blue: var(--cpc-soft-blue);
  --cprx-card: var(--cpc-card);
  --cprx-white: var(--cpc-white);
  --cprx-line: var(--cpc-line);
  --cprx-line-soft: var(--cpc-line-soft);
  --cprx-line-strong: var(--cpc-line-strong);
  --cprx-radius-sm: var(--cpc-radius-sm);
  --cprx-radius-md: var(--cpc-radius-md);
  --cprx-radius-lg: var(--cpc-radius-lg);
  --cprx-radius-xl: var(--cpc-radius-xl);
  --cprx-shadow-sm: var(--cpc-shadow-sm);
  --cprx-shadow-md: var(--cpc-shadow-md);
  --cprx-shadow-lg: var(--cpc-shadow-lg);
  --cprx-shadow-blue: var(--cpc-shadow-blue);
  --cprx-max: var(--cpc-max);
  --cprx-wide: var(--cpc-wide);
  --cprx-pad: var(--cpc-pad);
  --cprx-section-y: var(--cpc-section-y);
  --brand-primary: var(--cpc-primary);
  --brand-secondary: var(--cpc-secondary);
  --neutral-bg: var(--cpc-bg);
  --ink: var(--cpc-body);
  --muted: var(--cpc-muted);
  --legal: var(--cpc-legal);
  --line: var(--cpc-line-soft);
  --card: var(--cpc-card);
  --bg: var(--cpc-bg);
  --radius: var(--cpc-radius-md);
  --shadow: var(--cpc-shadow-md);
}

/* Pillar/series utility tokens may stay here because they are global identifiers. */
.g-por { background: linear-gradient(135deg, #0A4FA3, #4D77C2); color: #fff; }
.g-dcm { background: linear-gradient(135deg, #BFC1C2, #E0E0E0); color: #222; }
.g-inj { background: linear-gradient(135deg, #C9A43E, #F3D17B); color: #222; }
.g-mwp { background: linear-gradient(135deg, #F06292, #F8BBD0); color: #fff; }
.g-hmb { background: linear-gradient(135deg, #E2A24F, #F7C88C); color: #222; }
.g-free { background: linear-gradient(135deg, #6A1B9A, #9B59B6); color: #fff; }