/* Homepage token bundle: css/tokens/{fonts,colors,typography,spacing,shape,elevation,base}.css
   joined into one file so the homepage makes one render-blocking request
   instead of seven. The Google Fonts @import from fonts.css is loaded from
   index.html <head> instead (an @import here would chain a second
   blocking request). Edit the source files, then rebuild this one. */

/* ---- tokens/fonts.css ---- */
/* Prince Pal webfonts.
   SUBSTITUTION NOTE: the brand display face (PP Editorial Old) is a licensed
   retail font and no binaries were supplied. Instrument Serif is used as the
   nearest free stand-in (high-contrast, near-serif, editorial). Swap the
   @font-face src here once real files land. */

/* Metric-matched fallbacks. While the web fonts download the page renders
   in a local font; these scale it to the web font's width so text doesn't
   reflow (layout shift) when Instrument Serif / Manrope swap in. Values
   measured against the real fonts in Chrome. */
@font-face{font-family:"Instrument Serif Fallback";src:local("Times New Roman"),local("TimesNewRomanPSMT"),local("Times");size-adjust:86%;ascent-override:115%;descent-override:36%;line-gap-override:0%}
@font-face{font-family:"Manrope Fallback";src:local("Arial"),local("ArialMT"),local("Helvetica");size-adjust:99.5%;ascent-override:107.5%;descent-override:30.2%;line-gap-override:0%}

/* ---- tokens/colors.css ---- */
:root{
  /* Brand & accent */
  --primary:#FF5200;--primary-deep:#D73302;--on-primary:#ffffff;
  /* Accessible variants of the brand orange for small text and for button
     fills behind white text: #FF5200 itself is 3.0–3.3:1 on cream/white,
     under the 4.5:1 WCAG minimum. #FF5200 stays for headings, rules,
     dots and other decorative accents. */
  --primary-text:#C83D00;--primary-fill:#D73302;--primary-fill-hover:#B32B00;
  --sunshine-300:#ffce8c;--sunshine-500:#ffa23a;--sunshine-700:#ff8205;--sunshine-800:#e85b04;--sunshine-900:#C53800;
  --yellow-saturated:#ffd800;
  --block-5:#ffe08a;--block-6:#ffc53d;--block-7:#f0620f;

  /* Cream / warm neutral */
  --cream:#fff6e0;--cream-soft:#fffbef;--cream-deeper:#ffe9b8;--beige-deep:#efddb3;--footer-cream:#fff6e0;

  /* Surface */
  --canvas:#ffffff;--surface:#faf9f6;--surface-cream:#fff9e9;--surface-cream-soft:#fffbef;--surface-code:#14100d;
  --hairline:#e5e2dc;--hairline-soft:#eeebe5;--hairline-strong:#cfcac1;

  /* Text */
  --ink:#121212;--ink-tint:#1c1917;--charcoal:#2b2724;--slate:#55504a;--steel:#6b645c;--stone:#9c948a;--muted:#b8b0a6;
  --on-dark:#ffffff;--on-dark-muted:rgba(255,255,255,.64);--on-cream:#1a1613;

  /* Semantic */
  --link:#FF5200;--link-hover:#D73302;

  /* Signature gradients */
  --sunset-stripe:linear-gradient(90deg,var(--primary) 0%,var(--sunshine-700) 28%,var(--sunshine-500) 52%,var(--yellow-saturated) 76%,var(--cream) 100%);
  --sunset-sky:linear-gradient(135deg,var(--sunshine-700) 0%,var(--sunshine-900) 60%,var(--primary) 100%);

  /* Semantic aliases */
  --text-primary:var(--ink);--text-secondary:var(--slate);--text-tertiary:var(--steel);--text-muted:var(--muted);
  --surface-card:var(--canvas);--surface-panel:var(--cream);--border-default:var(--hairline-soft);--border-input:var(--hairline-strong);

  /* Fixed — deliberately does NOT flip with the theme. Two spots need a
     near-black value regardless of light/dark: the "dark" button variant
     (it should stay dark, not invert to a pale button) and text sitting on
     the CTA banner's fixed yellow/orange gradient (which also never
     inverts, so its text can't either). */
  --ink-fixed:#121212;
}

/* =====================================================================
   Dark mode — one value bank (--*-dark), applied by either of the two
   blocks below: system preference (prefers-color-scheme) when the visitor
   hasn't chosen explicitly, or the explicit [data-theme] choice made via
   the toggle in the nav (js/theme.js), which always wins over system.
   Accent colours (primary, sunshine/block family, the sunset gradients,
   on-dark, on-primary) are intentionally absent — they're vivid enough to
   read correctly on both a white and a near-black canvas, so they're
   never redefined; only surfaces, borders and text invert.
   ===================================================================== */
:root{
  --canvas-dark:#161310;--surface-dark:#1f1b17;--surface-cream-soft-dark:#241f1a;
  --cream-dark:#2a2115;--cream-deeper-dark:#3a2c16;--beige-deep-dark:#8a7248;--footer-cream-dark:#1c1712;
  --hairline-dark:#332c24;--hairline-soft-dark:#241f19;--hairline-strong-dark:#786547;
  --ink-dark:#f3ece0;--ink-tint-dark:#ede4d4;--charcoal-dark:#d8cdbb;--slate-dark:#b8ac98;
  --steel-dark:#948a79;--stone-dark:#79705f;--muted-dark:#544935;
  --on-cream-dark:#f0e6d2;--link-hover-dark:#ffa23a;
  --primary-text-dark:#FF5200;
  /* One credential-card swatch reuses --beige-deep as a flat fill (not a
     border) with ink text over it; --beige-deep-dark is tuned for the 3:1
     border case elsewhere and falls short at 3.9:1 for that 13px text, so
     that one swatch gets its own token instead of straining beige-deep to
     serve both roles. Light mode is untouched (same value as beige-deep). */
  --cred-amber:var(--beige-deep);--cred-amber-dark:#786040;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --canvas:var(--canvas-dark);--surface:var(--surface-dark);--surface-cream-soft:var(--surface-cream-soft-dark);
    --cream:var(--cream-dark);--cream-deeper:var(--cream-deeper-dark);--beige-deep:var(--beige-deep-dark);--footer-cream:var(--footer-cream-dark);
    --hairline:var(--hairline-dark);--hairline-soft:var(--hairline-soft-dark);--hairline-strong:var(--hairline-strong-dark);
    --ink:var(--ink-dark);--ink-tint:var(--ink-tint-dark);--charcoal:var(--charcoal-dark);--slate:var(--slate-dark);
    --steel:var(--steel-dark);--stone:var(--stone-dark);--muted:var(--muted-dark);
    --on-cream:var(--on-cream-dark);--link-hover:var(--link-hover-dark);--cred-amber:var(--cred-amber-dark);
    --primary-text:var(--primary-text-dark);
  }
}
:root[data-theme="dark"] {
  --canvas:var(--canvas-dark);--surface:var(--surface-dark);--surface-cream-soft:var(--surface-cream-soft-dark);
  --cream:var(--cream-dark);--cream-deeper:var(--cream-deeper-dark);--beige-deep:var(--beige-deep-dark);--footer-cream:var(--footer-cream-dark);
  --hairline:var(--hairline-dark);--hairline-soft:var(--hairline-soft-dark);--hairline-strong:var(--hairline-strong-dark);
  --ink:var(--ink-dark);--ink-tint:var(--ink-tint-dark);--charcoal:var(--charcoal-dark);--slate:var(--slate-dark);
  --steel:var(--steel-dark);--stone:var(--stone-dark);--muted:var(--muted-dark);
  --on-cream:var(--on-cream-dark);--link-hover:var(--link-hover-dark);--cred-amber:var(--cred-amber-dark);
    --primary-text:var(--primary-text-dark);
}

/* ---- tokens/typography.css ---- */
:root{
  --font-display:"Instrument Serif","Instrument Serif Fallback","PP Editorial Old","Times New Roman",Georgia,serif;
  --font-ui:"Manrope","Manrope Fallback","Inter",ui-sans-serif,system-ui,-apple-system,sans-serif;
  --font-heading:"Manrope","Manrope Fallback","Inter",ui-sans-serif,system-ui,sans-serif;
  --font-mono:"JetBrains Mono","SF Mono",Menlo,Consolas,monospace;

  /* size / weight / leading / tracking per token */
  --type-hero-display:italic 400 84px/1.05 var(--font-display);--track-hero-display:-1.5px;
  --type-display-lg:400 64px/1.10 var(--font-display);--track-display-lg:-1px;
  --type-heading-1:italic 400 52px/1.15 var(--font-display);--track-heading-1:-.5px;
  /* Display prose is set italic + capitalized; apply alongside the two tokens above. */
  --display-transform:capitalize; /* @kind other */
  --type-stat-display:400 56px/1.10 var(--font-display);--track-stat-display:-1px;
  --type-heading-2:600 36px/1.20 var(--font-heading);--track-heading-2:-.5px;
  --type-heading-3:600 28px/1.25 var(--font-heading);
  --type-heading-4:600 22px/1.30 var(--font-heading);
  --type-heading-5:600 18px/1.40 var(--font-heading);
  --type-subtitle:600 18px/1.50 var(--font-ui);
  --type-body-md:600 16px/1.55 var(--font-ui);
  --type-body-md-medium:700 16px/1.55 var(--font-ui);
  --type-body-sm:600 14px/1.50 var(--font-ui);
  --type-body-sm-medium:700 14px/1.50 var(--font-ui);
  --type-caption:600 13px/1.40 var(--font-ui);
  --type-caption-bold:700 13px/1.40 var(--font-ui);
  --type-micro:600 12px/1.40 var(--font-ui);
  --type-micro-uppercase:600 11px/1.40 var(--font-ui);--track-micro-uppercase:1px;
  --type-button-md:500 14px/1.30 var(--font-ui);
  --type-code-md:400 14px/1.50 var(--font-mono);
}

/* ---- tokens/spacing.css ---- */
:root{
  --space-xxs:4px;--space-xs:8px;--space-sm:12px;--space-md:16px;--space-lg:20px;--space-xl:24px;
  --space-xxl:32px;--space-xxxl:40px;--space-section-sm:48px;--space-section:64px;--space-section-lg:96px;--space-hero:120px;
  --container-max:1280px;--container-gutter:32px;--form-panel-max:520px;
}

/* ---- tokens/shape.css ---- */
:root{
  --rounded-xs:4px;--rounded-sm:6px;--rounded-md:8px;--rounded-lg:12px;--rounded-xl:16px;--rounded-xxl:20px;--rounded-full:9999px;
  --radius-button:var(--rounded-md);--radius-card:var(--rounded-lg);--radius-input:var(--rounded-md);
  --control-height:44px;
}

/* ---- tokens/elevation.css ---- */
:root{
  --shadow-0:none;
  --shadow-1:rgba(0,0,0,.04) 0px 1px 2px 0px;
  --shadow-2:rgba(0,0,0,.04) 0px 4px 12px 0px;
  --shadow-3:rgba(0,0,0,.08) 0px 12px 24px -4px;
  --shadow-4:rgba(0,0,0,.12) 0px 16px 48px -8px;
  --transition-fast:150ms ease; /* @kind other */
  --transition-base:200ms ease; /* @kind other */
}

/* ---- tokens/base.css ---- */
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--canvas);color:var(--ink);font:var(--type-body-md);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,h5{margin:0}
p{margin:0}
a{color:var(--link);text-decoration:none}
a:hover{color:var(--link-hover);text-decoration:underline}
::selection{background:var(--cream-deeper);color:var(--ink)}
.pp-container{max-width:var(--container-max);margin:0 auto;padding:0 var(--container-gutter)}