/* =============================================================
   Productive Edge — Design System Tokens
   ------------------------------------------------------------
   A bold, modern evolution of the PE brand. Rooted in the
   signature electric blue (#0A3EC2) and a tall rounded-
   grotesque logotype. Works in both light and dark modes,
   with clean neutrals as the crisp counterpoint. No monospace —
   Plus Jakarta Sans everywhere.
   ============================================================= */

/* ---------- Font faces ----------
   PRIMARY: Plus Jakarta Sans (preferred).
   Instrument Serif for rare editorial italic accents.
--------------------------------- */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap');

:root {
  /* ========================================================
     COLOR — Primary · Electric Blue
     Electric Blue is the heartbeat. It is VIVID, not pastel,
     not muted. Use it sparingly for emphasis — large type,
     stat callouts, active states, accents. Never as a
     decorative gradient wash.
     ======================================================== */
  --pe-blue-900: #0C2261;   /* Deep, for backgrounds of blue sections */
  --pe-blue-700: #0C35A0;   /* Hover state for primary */
  --pe-blue-600: #0A3EC2;   /* ★ PRIMARY brand color */
  --pe-blue-500: #134EE8;   /* Secondary accent — eyebrows on dark */
  --pe-blue-200: #9AB1ED;   /* Tints on surface, chip backgrounds */
  --pe-blue-100: #C4D0F2;   /* Very pale tint, sparing use */
  --pe-blue-50:  #EBEFFA;   /* Brand-subtle / tinted backgrounds */

  /* Aliases — primary-* scale, identical to blue-* */
  --pe-primary-900: var(--pe-blue-900);
  --pe-primary-700: var(--pe-blue-700);
  --pe-primary-600: var(--pe-blue-600);
  --pe-primary-500: var(--pe-blue-500);
  --pe-primary-200: var(--pe-blue-200);
  --pe-primary-100: var(--pe-blue-100);
  --pe-primary-50:  var(--pe-blue-50);

  /* ========================================================
     COLOR — Neutrals
     Clean, true neutrals for text, surfaces and borders.
     ======================================================== */
  --pe-neutral-900: #1B1B1C;   /* ★ default text */
  --pe-neutral-800: #333335;   /* High-contrast body on surfaces */
  --pe-neutral-500: #767677;   /* Secondary text / muted copy */
  --pe-neutral-400: #A4A4A4;   /* Disabled / placeholder */
  --pe-neutral-300: #D1D1D2;   /* Strong dividers / borders */
  --pe-neutral-100: #F4F4F4;   /* Hairline borders / subtle surface */
  --pe-neutral-50:  #FAFAFA;   /* Surface background */

  /* ---- Legacy aliases (old ink-* scale mapped to neutrals) ---- */
  --pe-ink-1000: #000000;
  --pe-ink-950:  var(--pe-neutral-900);
  --pe-ink-900:  var(--pe-neutral-900);
  --pe-ink-800:  var(--pe-neutral-800);
  --pe-ink-700:  var(--pe-neutral-800);
  --pe-ink-600:  var(--pe-neutral-500);
  --pe-ink-500:  var(--pe-neutral-500);
  --pe-ink-400:  var(--pe-neutral-400);
  --pe-ink-300:  var(--pe-neutral-300);
  --pe-ink-200:  var(--pe-neutral-100);
  --pe-ink-100:  var(--pe-neutral-100);
  --pe-ink-50:   var(--pe-neutral-50);

  /* ---- Legacy porcelain aliases (mapped to neutrals) ---- */
  --pe-porcelain-50:  #FFFFFF;          /* page background */
  --pe-porcelain-100: var(--pe-neutral-50);
  --pe-porcelain-200: var(--pe-neutral-100);
  --pe-porcelain-300: var(--pe-neutral-300);
  --pe-porcelain-400: var(--pe-neutral-500);

  --pe-cream-50:  var(--pe-porcelain-50);
  --pe-cream-100: var(--pe-porcelain-100);
  --pe-cream-200: var(--pe-porcelain-200);
  --pe-cream-300: var(--pe-porcelain-300);

  /* ========================================================
     COLOR — Semantic (unchanged)
     ======================================================== */
  --pe-success: #87C546;     /* Validated, compliant */
  --pe-success-tint: #E6F3D4;
  --pe-warning: #FFC845;     /* Caution, review needed */
  --pe-warning-tint: #FFF1C9;
  --pe-danger:  #ED3847;     /* Denied, blocked */
  --pe-danger-tint: #FBD6D9;
  --pe-info:    var(--pe-blue-600);
  --pe-info-tint: var(--pe-blue-50);

  /* ========================================================
     SEMANTIC TOKENS — Foreground/Background (light mode)
     ======================================================== */
  --bg-1:   #FFFFFF;                    /* Page */
  --bg-2:   var(--pe-neutral-50);       /* Cards / surface */
  --bg-3:   var(--pe-neutral-100);      /* Subtle surfaces / borders */
  --bg-inverse: var(--pe-neutral-900);

  --fg-1:   var(--pe-neutral-900);     /* Body primary */
  --fg-2:   var(--pe-neutral-800);     /* Body secondary */
  --fg-3:   var(--pe-neutral-500);     /* Muted / captions */
  --fg-4:   var(--pe-neutral-400);     /* Placeholder, disabled */
  --fg-inverse: #FFFFFF;

  --accent: var(--pe-blue-600);
  --accent-hover: var(--pe-blue-700);
  --accent-soft: var(--pe-blue-50);

  --border-1: var(--pe-neutral-100);    /* Hairlines */
  --border-2: var(--pe-neutral-300);    /* Defined borders */
  --border-strong: var(--pe-neutral-900);

  /* ========================================================
     TYPOGRAPHY — Families
     PRIMARY: Plus Jakarta Sans (set everywhere by default).
     Instrument Serif is reserved for rare editorial italic.
     ======================================================== */
  --pe-font-primary: 'Plus Jakarta Sans';
  --font-display: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body:    'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-editorial: 'Instrument Serif', Georgia, serif;

  /* ========================================================
     TYPE SCALE — Fluid-ish, but predictable.
     ======================================================== */
  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-md:   18px;
  --text-lg:   20px;
  --text-xl:   24px;
  --text-2xl:  32px;
  --text-3xl:  44px;
  --text-4xl:  60px;
  --text-5xl:  84px;
  --text-6xl:  128px;
  --text-7xl:  180px;

  --tracking-tightest: -0.035em;
  --tracking-tight:    -0.02em;
  --tracking-normal:   -0.01em;
  --tracking-wide:     0.02em;
  --tracking-widest:   0.14em;

  --leading-none:    1;
  --leading-tight:   1.08;
  --leading-snug:    1.2;
  --leading-normal:  1.45;
  --leading-relaxed: 1.6;

  /* ========================================================
     SPACING — 4pt base
     ======================================================== */
  --space-0:  0;
  --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;
  --space-32: 128px;

  /* ========================================================
     RADII
     ======================================================== */
  --radius-none: 0;
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  24px;
  --radius-pill: 999px;

  /* ========================================================
     ELEVATION — Soft, restrained.
     ======================================================== */
  --shadow-none: none;
  --shadow-xs:  0 1px 2px rgba(27, 27, 28, 0.04);
  --shadow-sm:  0 2px 6px rgba(27, 27, 28, 0.06),
                0 1px 2px rgba(27, 27, 28, 0.04);
  --shadow-md:  0 8px 24px rgba(27, 27, 28, 0.08),
                0 2px 6px rgba(27, 27, 28, 0.04);
  --shadow-lg:  0 24px 48px rgba(27, 27, 28, 0.12),
                0 4px 12px rgba(27, 27, 28, 0.06);
  --shadow-xl:  0 48px 96px rgba(27, 27, 28, 0.16),
                0 8px 24px rgba(27, 27, 28, 0.08);

  --shadow-focus: 0 0 0 3px rgba(10, 62, 194, 0.28);

  /* ========================================================
     MOTION
     ======================================================== */
  --dur-1: 120ms;
  --dur-2: 200ms;
  --dur-3: 320ms;
  --dur-4: 500ms;
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.5, 1.6, 0.4, 1);
}

/* =============================================================
   Dark mode swap — invert the semantic tokens.
   ============================================================= */
[data-theme="dark"],
.theme-dark {
  --bg-1: var(--pe-neutral-900);
  --bg-2: var(--pe-neutral-800);
  --bg-3: #2A2A2C;
  --bg-inverse: #FFFFFF;

  --fg-1: #FFFFFF;
  --fg-2: var(--pe-neutral-100);
  --fg-3: var(--pe-neutral-400);
  --fg-4: var(--pe-neutral-500);
  --fg-inverse: var(--pe-neutral-900);

  --accent: var(--pe-blue-500);
  --accent-hover: var(--pe-blue-200);
  --accent-soft: rgba(19, 78, 232, 0.18);

  --border-1: rgba(255, 255, 255, 0.08);
  --border-2: rgba(255, 255, 255, 0.14);
  --border-strong: #FFFFFF;

  --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 24px 48px rgba(0, 0, 0, 0.6);
}

/* =============================================================
   SEMANTIC COMPONENT CLASSES
   ============================================================= */

.pe-hero-display {
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: clamp(72px, 9vw, 128px);
  font-weight: 500;
  line-height: var(--leading-none);
  letter-spacing: var(--tracking-tightest);
  color: var(--fg-1);
}

.pe-stat-display {
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: clamp(80px, 11vw, 180px);
  font-weight: 500;
  line-height: 0.92;
  letter-spacing: var(--tracking-tightest);
  color: var(--accent);
}

.pe-h1, h1 {
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: var(--text-5xl);
  font-weight: 500;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tightest);
  color: var(--fg-1);
  text-wrap: balance;
}

.pe-h2, h2 {
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: var(--text-4xl);
  font-weight: 500;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
  text-wrap: balance;
}

.pe-h3, h3 {
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: var(--text-3xl);
  font-weight: 500;
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}

.pe-h4, h4 {
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: var(--text-2xl);
  font-weight: 600;
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-normal);
  color: var(--fg-1);
}

.pe-h5, h5 {
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: var(--text-xl);
  font-weight: 600;
  line-height: var(--leading-snug);
  color: var(--fg-1);
}

.pe-eyebrow {
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}

.pe-eyebrow-muted {
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-3);
}

.pe-eyebrow-numbered::before {
  content: attr(data-num) "  ·  ";
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.pe-lead {
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: var(--text-lg);
  font-weight: 400;
  line-height: var(--leading-normal);
  color: var(--fg-2);
  text-wrap: pretty;
}

.pe-body, p {
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: var(--text-base);
  font-weight: 400;
  line-height: var(--leading-relaxed);
  color: var(--fg-2);
  text-wrap: pretty;
}

.pe-caption {
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: var(--text-sm);
  font-weight: 400;
  line-height: var(--leading-normal);
  color: var(--fg-3);
}

.pe-meta {
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--fg-3);
}

.pe-editorial {
  font-family: var(--font-editorial);
  font-size: var(--text-3xl);
  font-weight: 400;
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-normal);
  color: var(--fg-1);
}
.pe-editorial em { font-style: italic; }

/* =============================================================
   LOGO UTILITIES
   Single SVG source (blue); recolor via CSS filter.
   Use `pe-logo-full.svg` for the wordmark, `pe-logo-short.svg`
   for the p/e monogram.
     <img class="pe-logo" src=".../pe-logo-full.svg">              blue (default)
     <img class="pe-logo pe-logo--white" src=".../pe-logo-full.svg">  white (for dark bg)
     <img class="pe-logo pe-logo--black" src=".../pe-logo-full.svg">  black
   ============================================================= */
.pe-logo { display: block; height: auto; width: auto; }
.pe-logo--white { filter: brightness(0) invert(1); }
.pe-logo--black { filter: brightness(0); }