:root {
  /* Pencil Glow Creations design tokens v1.0 */
  --pg-navy: #041727;
  --pg-navy-raised: #0a2440;
  --pg-line-dark: #1e3450;
  --pg-spark: #00bbfe;
  --pg-signal: #0e68fe;
  --pg-halo: #7028fc;
  --pg-paper: #fdfdfd;
  --pg-mist: #eef1f6;
  --pg-line-light: #c9d1dd;
  --pg-ink: #0b1b2e;
  --pg-muted-dark: #c3cddb;   /* secondary text on navy */
  --pg-muted-light: #3d4a5c;  /* secondary text on mist */
  --pg-link-light: #0033fb;   /* link text on mist */
  --pg-on-spark: #041727;     /* text on cyan buttons */

  --pg-gradient-glow: linear-gradient(90deg, #00bbfe 0%, #0e68fe 50%, #7028fc 100%);

  --pg-font-sans: "Montserrat", "Helvetica Neue", sans-serif;
  --pg-font-mono: "IBM Plex Mono", ui-monospace, monospace;

  --pg-space-1: 4px;  --pg-space-2: 8px;  --pg-space-3: 12px; --pg-space-4: 16px;
  --pg-space-6: 24px; --pg-space-8: 32px; --pg-space-12: 48px; --pg-space-16: 64px;

  --pg-radius-sm: 8px; --pg-radius-md: 16px; --pg-radius-lg: 24px; --pg-radius-full: 9999px;

  --pg-shadow-card: 0 16px 40px rgba(0, 0, 0, 0.35);
  --pg-shadow-glow: 0 0 60px rgba(14, 104, 254, 0.35);

  --pg-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --pg-duration-press: 100ms;
  --pg-duration-hover: 150ms;
  --pg-duration-reveal: 400ms;
  --pg-duration-draw: 600ms;
  --pg-duration-glow: 800ms;
  --pg-stagger: 80ms;
  --pg-rise: 16px;
}
/* Dark and light mode v1.2 — semantic variables. Dark is default; light follows the device unless data-theme is set on <html>. */
:root, [data-theme="dark"] {
  color-scheme: dark;
  --pg-surface: #041727;
  --pg-surface-raised: #0a2440;
  --pg-line: #1e3450;
  --pg-text: #fdfdfd;
  --pg-text-muted: #c3cddb;
  --pg-link: #00bbfe;
  --pg-surface-inverse: #eef1f6;
  --pg-text-inverse: #0b1b2e;
  --pg-glow: 0 0 60px rgba(14, 104, 254, 0.35);
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --pg-surface: #eef1f6;
    --pg-surface-raised: #fdfdfd;
    --pg-line: #c9d1dd;
    --pg-text: #0b1b2e;
    --pg-text-muted: #3d4a5c;
    --pg-link: #0033fb;
    --pg-surface-inverse: #041727;
    --pg-text-inverse: #fdfdfd;
    --pg-glow: 0 0 48px rgba(14, 104, 254, 0.2);
  }
}
[data-theme="light"] {
  color-scheme: light;
  --pg-surface: #eef1f6;
  --pg-surface-raised: #fdfdfd;
  --pg-line: #c9d1dd;
  --pg-text: #0b1b2e;
  --pg-text-muted: #3d4a5c;
  --pg-link: #0033fb;
  --pg-surface-inverse: #041727;
  --pg-text-inverse: #fdfdfd;
  --pg-glow: 0 0 48px rgba(14, 104, 254, 0.2);
}
body { background: var(--pg-surface); color: var(--pg-text); }
a { color: var(--pg-link); }
.pg-card { background: var(--pg-surface-raised); border: 1px solid var(--pg-line); border-radius: var(--pg-radius-md); }
.pg-muted { color: var(--pg-text-muted); }
.pg-inverse { background: var(--pg-surface-inverse); color: var(--pg-text-inverse); }
.pg-logo-panel { background: var(--pg-navy); border-radius: var(--pg-radius-md); padding: var(--pg-space-6); display: inline-block; } /* always wrap the logo PNG in this */
/* Toggle: a <button aria-label="Switch colour mode"> that sets document.documentElement.dataset.theme to "light" or "dark" and saves it in localStorage. */

/* Load fonts: https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;700;800&family=IBM+Plex+Mono:wght@500&display=swap */
.pg-display   { font: 800 64px/68px var(--pg-font-sans); letter-spacing: -0.01em; }
.pg-h1        { font: 800 40px/46px var(--pg-font-sans); }
.pg-h2        { font: 700 28px/34px var(--pg-font-sans); }
.pg-body      { font: 400 18px/28px var(--pg-font-sans); }
.pg-descriptor{ font: 300 16px/20px var(--pg-font-sans); letter-spacing: 0.3em; text-transform: uppercase; }
.pg-label     { font: 500 14px/20px var(--pg-font-mono); letter-spacing: 0.15em; text-transform: uppercase; }
.pg-button    { background: var(--pg-spark); color: var(--pg-on-spark); font: 700 18px/1 var(--pg-font-sans); border: 0; border-radius: var(--pg-radius-full); padding: 16px 32px; }
.pg-glow-line { height: 8px; background: linear-gradient(90deg, #00bbfe 0 33.33%, #0e68fe 33.33% 66.66%, #7028fc 66.66% 100%); }

/* Motion v1.1 — add class "pg-reveal" to elements; add "is-visible" with an IntersectionObserver (threshold 0.15, unobserve after first reveal).
   The "pg-motion" class on <html> should be added by script, so content stays visible if scripts are off. */
.pg-motion .pg-reveal { opacity: 0; transform: translateY(var(--pg-rise)); transition: opacity var(--pg-duration-reveal) var(--pg-ease-out), transform var(--pg-duration-reveal) var(--pg-ease-out); }
.pg-motion .pg-reveal.is-visible { opacity: 1; transform: none; }
.pg-motion .pg-reveal:nth-child(2) { transition-delay: calc(var(--pg-stagger) * 1); }
.pg-motion .pg-reveal:nth-child(3) { transition-delay: calc(var(--pg-stagger) * 2); }
.pg-motion .pg-reveal:nth-child(4) { transition-delay: calc(var(--pg-stagger) * 3); }
.pg-motion .pg-glow-line { transform: scaleX(0); transform-origin: left; transition: transform var(--pg-duration-draw) var(--pg-ease-out); }
.pg-motion .pg-glow-line.is-visible { transform: scaleX(1); }
.pg-glow-card { box-shadow: var(--pg-shadow-card); transition: box-shadow var(--pg-duration-glow) var(--pg-ease-out); }
.pg-glow-card.is-visible { box-shadow: var(--pg-glow); }
.pg-button { transition: transform var(--pg-duration-hover) var(--pg-ease-out); }
.pg-button:hover { transform: translateY(-2px); }
.pg-button:active { transform: scale(0.98); transition-duration: var(--pg-duration-press); }
@media (prefers-reduced-motion: reduce) {
  .pg-motion .pg-reveal, .pg-motion .pg-glow-line, .pg-glow-card, .pg-button { transition: none !important; transform: none !important; opacity: 1 !important; }
}