/* ------------------------------------------------------------------
 * Platform Engineering — colors & type foundations
 * Derived from the PE Design System Figma file.
 * ------------------------------------------------------------------ */

/* Fonts: Aeonik (display/brand) is proprietary — we serve it via CDN
   where possible and fall back to the closest free match.
   Roboto is body/UI. JetBrains Mono is code. All are loaded from CDN. */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;600;700;800&display=swap');
/* Aeonik (proprietary, brand display) — served from /fonts. */
@font-face { font-family: "Aeonik"; src: url("fonts/Aeonik-Air.otf")         format("opentype"); font-weight: 200; font-style: normal;  font-display: swap; }
@font-face { font-family: "Aeonik"; src: url("fonts/Aeonik-AirItalic.otf")   format("opentype"); font-weight: 200; font-style: italic;  font-display: swap; }
@font-face { font-family: "Aeonik"; src: url("fonts/Aeonik-Light.otf")       format("opentype"); font-weight: 300; font-style: normal;  font-display: swap; }
@font-face { font-family: "Aeonik"; src: url("fonts/Aeonik-LightItalic.otf") format("opentype"); font-weight: 300; font-style: italic;  font-display: swap; }
@font-face { font-family: "Aeonik"; src: url("fonts/Aeonik-Regular.otf")     format("opentype"); font-weight: 400; font-style: normal;  font-display: swap; }
@font-face { font-family: "Aeonik"; src: url("fonts/Aeonik-Medium.otf")      format("opentype"); font-weight: 500; font-style: normal;  font-display: swap; }
@font-face { font-family: "Aeonik"; src: url("fonts/Aeonik-Bold.otf")        format("opentype"); font-weight: 700; font-style: normal;  font-display: swap; }
@font-face { font-family: "Aeonik"; src: url("fonts/Aeonik-BoldItalic.otf")  format("opentype"); font-weight: 700; font-style: italic;  font-display: swap; }
@font-face { font-family: "Aeonik"; src: url("fonts/Aeonik-Black.otf")       format("opentype"); font-weight: 900; font-style: normal;  font-display: swap; }
@font-face { font-family: "Aeonik"; src: url("fonts/Aeonik-BlackItalic.otf") format("opentype"); font-weight: 900; font-style: italic;  font-display: swap; }

:root {
  /* -------- Brand palette (raw, from Figma) -------- */
  --pe-ink-900:       #1E143C;  /* deepest navy-violet, primary dark surface + body text */
  --pe-ink-950:       #12021C;  /* near-black violet, large dark backgrounds */
  --pe-ink-1000:      #0C0222;  /* blackest violet */
  --pe-ink-800:       #1A0942;  /* rich deep purple */
  --pe-ink-700:       #290155;  /* darker purple accent */

  --pe-violet-700:    #7957FF;  /* deep violet (hover/pressed) */
  --pe-violet-600:    #7F51FF;  /* PRIMARY violet — brand hero color */
  --pe-violet-500:    #8A38F5;  /* bright violet accent (dashes in Figma) */
  --pe-violet-400:    #9747FF;  /* mid violet stroke */
  --pe-violet-300:    #BAA3F9;  /* soft lilac — widely used for tints */
  --pe-violet-200:    #C8B5FB;  /* pale lilac fill */
  --pe-violet-100:    #F4F3F7;  /* nearly-white lilac background */

  --pe-green-600:     #0BB362;  /* PE green — CTAs, accents */
  --pe-green-300:     #85E9B9;  /* mint, success tints */

  --pe-blue-400:      #3E8BFF;  /* data / chart blue */
  --pe-magenta-500:   #F521DE;  /* accent magenta — highlights, labels */

  --pe-lilac-400:     #D4CFE0;  /* neutral lilac-gray — borders, dividers */
  --pe-white:         #FFFFFF;
  --pe-black:         #000000;

  /* -------- Semantic surfaces -------- */
  --surface-default:        #FFFFFF;
  --surface-subtle:         #F4F3F7;
  --surface-brand-subtle:   #F1EDFE;
  --surface-brand:          #7F51FF;
  --surface-brand-pressed:  #5C41A5;
  --surface-inverse:        #1E143C;
  --bg-default:       var(--surface-default);
  --bg-elevated:      var(--surface-default);
  --bg-subtle:        var(--surface-subtle);
  --bg-inverse:       var(--pe-ink-900);
  --bg-brand:         var(--pe-violet-600);
  --bg-brand-soft:    var(--pe-violet-200);

  /* -------- Semantic text -------- */
  --fg-default:       #1E143C;
  --fg-muted:         #564682;
  --fg-subtle:        #7A6CA0;
  --fg-on-dark:       #FFFFFF;
  --fg-brand:         #7F51FF;
  --fg-1:             var(--fg-default);
  --fg-2:             var(--fg-muted);
  --fg-3:             var(--fg-subtle);
  --fg-inverse:       var(--fg-on-dark);

  /* -------- Semantic borders -------- */
  --border-default:   #D4CFE0;
  --border-strong:    #1E143C;
  --border-brand:     #7F51FF;
  --border-focus:     #9747FF;

  /* -------- Status -------- */
  --status-success:   #0BB362;
  --status-info:      #3E8BFF;
  --status-highlight: #F521DE;
  --fg-inverse-muted: var(--pe-lilac-400);
  --fg-brand:         var(--pe-violet-600);
  --fg-link:          var(--pe-ink-900);
  --fg-success:       var(--pe-green-600);

  /* -------- Borders & dividers -------- */
  --border-default:   var(--pe-lilac-400);
  --border-strong:    var(--pe-ink-900);
  --border-inverse:   rgba(255,255,255,0.16);
  --border-brand:     var(--pe-violet-500);

  /* -------- Type families -------- */
  --font-display:     "Aeonik", "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body:        "Aeonik", "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:        "JetBrains Mono", "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* -------- Desktop type scale (from Figma Typography page) -------- */
  --fs-h1:            56px;  --lh-h1: 1.2;   --ls-h1: -0.02em;
  --fs-h2:            48px;  --lh-h2: 1.2;   --ls-h2: -0.02em;
  --fs-h3:            40px;  --lh-h3: 1.2;   --ls-h3: -0.01em;
  --fs-h4:            32px;  --lh-h4: 1.3;
  --fs-h5:            24px;  --lh-h5: 1.4;
  --fs-h6:            20px;  --lh-h6: 1.4;

  --fs-text-lg:       20px; --lh-text-lg: 1.5;
  --fs-text-md:       18px; --lh-text-md: 1.5;
  --fs-text-reg:      16px; --lh-text-reg: 1.5;  /* DEFAULT body */
  --fs-text-sm:       14px; --lh-text-sm: 1.5;
  --fs-text-xs:       12px; --lh-text-xs: 1.5;
  --fs-text-xxs:      10px; --lh-text-xxs: 1.5;

  /* -------- Radius (from Figma Radius page) -------- */
  --radius-sm:        4px;    /* small: < 4 cols (buttons, inputs, chips) */
  --radius-md:        8px;    /* medium: 2–3 cols (cards, small images) */
  --radius-lg:        16px;   /* large: 1–2 cols (hero cards, containers) */
  --radius-pill:      9999px;
  --radius-circle:    50%;

  /* -------- Shadows (from Figma Shadows page) -------- */
  --shadow-xs:  0 1px 2px 0 rgba(30,20,60,0.05);
  --shadow-sm:  0 1px 3px 0 rgba(30,20,60,0.10), 0 1px 2px -1px rgba(30,20,60,0.10);
  --shadow-md:  0 4px 6px -1px rgba(30,20,60,0.10), 0 2px 4px -2px rgba(30,20,60,0.10);
  --shadow-lg:  0 10px 15px -3px rgba(30,20,60,0.10), 0 4px 6px -4px rgba(30,20,60,0.10);
  --shadow-xl:  0 20px 25px -5px rgba(30,20,60,0.10), 0 8px 10px -6px rgba(30,20,60,0.10);
  --shadow-xxl: 0 25px 50px -12px rgba(30,20,60,0.25);

  /* -------- Spacing scale (Figma consistently uses these) -------- */
  --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-28: 112px;
  --section-pad-y: 112px;     /* sections on desktop */
  --section-pad-x: 240px;     /* sections on desktop */
  --container-max: 1440px;    /* full page width */
  --content-max:   960px;     /* inner container */
}

/* ------------------------------------------------------------------
 * Semantic element styles
 * ------------------------------------------------------------------ */
body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-text-reg);
  line-height: var(--lh-text-reg);
  color: var(--fg-1);
  background: var(--bg-default);
  -webkit-font-smoothing: antialiased;
}

h1, .pe-h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  letter-spacing: var(--ls-h1);
  color: var(--fg-1);
  margin: 0;
}
h2, .pe-h2 {
  font-family: var(--font-display); font-weight: 500;
  font-size: var(--fs-h2); line-height: var(--lh-h2);
  letter-spacing: var(--ls-h2); color: var(--fg-1); margin: 0;
}
h3, .pe-h3 {
  font-family: var(--font-display); font-weight: 500;
  font-size: var(--fs-h3); line-height: var(--lh-h3);
  letter-spacing: var(--ls-h3); color: var(--fg-1); margin: 0;
}
h4, .pe-h4 {
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--fs-h4); line-height: var(--lh-h4);
  color: var(--fg-1); margin: 0;
}
h5, .pe-h5 {
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--fs-h5); line-height: var(--lh-h5);
  color: var(--fg-1); margin: 0;
}
h6, .pe-h6 {
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--fs-h6); line-height: var(--lh-h6);
  color: var(--fg-1); margin: 0;
}

p, .pe-body { font-size: var(--fs-text-reg); line-height: var(--lh-text-reg); color: var(--fg-1); margin: 0; }
.pe-body-lg { font-size: var(--fs-text-lg); line-height: var(--lh-text-lg); color: var(--fg-2); }
.pe-body-md { font-size: var(--fs-text-md); line-height: var(--lh-text-md); color: var(--fg-2); }
.pe-body-sm { font-size: var(--fs-text-sm); line-height: var(--lh-text-sm); color: var(--fg-2); }
.pe-caption { font-size: var(--fs-text-xs); line-height: var(--lh-text-xs); color: var(--fg-3); }
.pe-caption-xs { font-size: var(--fs-text-xxs); line-height: var(--lh-text-xxs); color: var(--fg-3); letter-spacing: .04em; }
.pe-tagline { font-size: var(--fs-text-reg); line-height: var(--lh-text-reg); font-weight: 700; color: var(--fg-1); }

code, kbd, samp, pre, .pe-mono {
  font-family: var(--font-mono);
  font-size: 0.925em;
}

a, .pe-link {
  color: var(--fg-link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
a:hover { color: var(--fg-brand); }

/* Mobile overrides (< 768) */
@media (max-width: 768px) {
  :root {
    --fs-h1: 40px;
    --fs-h2: 36px;
    --fs-h3: 32px;
    --fs-h4: 24px;
    --fs-h5: 20px;
    --fs-h6: 18px;
    --section-pad-y: 64px;
    --section-pad-x: 20px;
  }
}

/* ------------------------------------------------------------------
 * Utility classes (dark section inversion)
 * ------------------------------------------------------------------ */
.pe-on-dark      { color: var(--fg-inverse); }
.pe-on-dark h1,
.pe-on-dark h2,
.pe-on-dark h3,
.pe-on-dark h4,
.pe-on-dark h5,
.pe-on-dark h6 { color: var(--fg-inverse); }
.pe-on-dark .pe-body-lg,
.pe-on-dark .pe-body-sm,
.pe-on-dark p  { color: var(--fg-inverse-muted); }