/* ==========================================================================
   PONJOH — design tokens
   --------------------------------------------------------------------------
   Structure is a 1:1 port of the reference launch-infra app. Every COLOUR is
   re-anchored on the ponsfamily.com palette (read live off ponsfamily.com):

     --accent #d4fc50   --accent-hover #e2ff66   --accent-soft #1c2610
     --accent-mid #2a3a14   --accent-green #30d158   --accent-red #ff453a
     --bg-page #0d0d0d  --bg-white #161616  --bg-elevated #1c1c1c
     --text-primary #f2f2f2  --divider #f2f2f21f

   The reference design leans on a FIVE-STOP spectrum (wordmark shimmer, the
   wireframe globe, per-card accents, flow diagrams). ponsfamily is effectively
   monochrome lime, so a flat swap would collapse that ramp into one colour and
   kill the device. Instead the five stops are re-derived inside the ponsfamily
   green world, and mapped BY ROLE rather than by position: the reference's
   most-used accent becomes ponsfamily's signature #d4fc50.

     reference          role                     ponjoh
     --------------------------------------------------------------
     mint   #35E8C8  →  primary UI accent     →  #d4fc50  (signature)
     yellow #FFD400  →  CTA gradient head     →  #e2ff66  (accent-hover)
     lime   #A8E63C  →  secondary highlight   →  #b9ee5a
     green  #4DE88A  →  mid ramp              →  #8fdc4e
     cyan   #2FD9E8  →  ramp anchor           →  #30d158  (accent-green)
     orange #FFA24D  →  burn / destructive    →  #ff453a  (accent-red)

   Result: the gradient still reads as a gradient, cards stay differentiated,
   and nothing outside the ponsfamily green family appears anywhere.
   ========================================================================== */

:root {
  /* ── ponsfamily source tokens (verbatim) ────────────────────────────── */
  --pf-accent: #d4fc50;
  --pf-accent-hover: #e2ff66;
  --pf-accent-soft: #1c2610;
  --pf-accent-mid: #2a3a14;
  --pf-accent-contrast: #111;
  --pf-accent-green: #30d158;
  --pf-accent-red: #ff453a;
  --pf-btn-glow: 0 8px 24px #d4fc5047;
  --pf-field-focus-glow: 0 0 0 3px #d4fc5029;

  /* ── the five-stop ramp ─────────────────────────────────────────────── */
  --bright: #e2ff66; /* was --yellow */
  --lime: #b9ee5a; /* was --lime   */
  --leaf: #8fdc4e; /* was --green  */
  --accent: #d4fc50; /* was --mint  · signature */
  --deep: #30d158; /* was --cyan   */
  --ember: #ff453a; /* was --orange · burn      */

  /* ── surfaces ───────────────────────────────────────────────────────── */
  --ink: #0d0d0d; /* ponsfamily --bg-page     */
  --ink-deep: #080808;
  --ink-raised: #161616; /* ponsfamily --bg-white    */
  --ink-soft: #1c1c1c; /* ponsfamily --bg-elevated */
  --ink-panel: #1f1f1f; /* ponsfamily --panel-blue  */

  /* ── ink on surface ─────────────────────────────────────────────────── */
  --paper: #f2f2f2; /* ponsfamily --text-primary */
  --paper-72: #f2f2f2b8;
  --paper-56: #f2f2f294; /* ponsfamily --text-muted   */
  --paper-36: #f2f2f266; /* ponsfamily --text-subtle  */
  --paper-18: #f2f2f22e;
  --muted: #f2f2f294;
  --muted-strong: #f2f2f2c7;

  /* ── lines ──────────────────────────────────────────────────────────── */
  --line-soft: #f2f2f214;
  --line: #f2f2f21f; /* ponsfamily --divider */
  --line-strong: #f2f2f240;
  --edge: #f2f2f24d;
  --edge-w: 1px;

  /* ── semantic ───────────────────────────────────────────────────────── */
  --ok: #30d158; /* ponsfamily --success */
  --bad: #ff453a; /* ponsfamily --danger  */
  --warn: #e8c14a; /* warm hold: pure red would misread as failure */

  /* ── glass (ponsfamily) ─────────────────────────────────────────────── */
  --glass-fill: #161616c7;
  --glass-border: #ffffff1a;
  --glass-highlight: inset 0 1px 0 #ffffff0f;

  /* ── type ───────────────────────────────────────────────────────────── */
  --sans: "Inter Variable", Inter, "Helvetica Neue", "Segoe UI", sans-serif;
  --geo: "Jost Variable", Jost, Futura, "Avenir Next", "Century Gothic", sans-serif;
  --mono: ui-monospace, "SFMono-Regular", "SF Mono", "Cascadia Mono", "Roboto Mono", Menlo, monospace;
  --serif: "Instrument Serif", Georgia, serif; /* ponsfamily --font-serif */

  --step-1: 1.25rem;
  --step-2: 1.5625rem;
  --step-3: 1.953rem;
  --step-4: 2.441rem;
  --step-5: 3.052rem;
  --step-6: 3.815rem;

  /* ── space ──────────────────────────────────────────────────────────── */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s6: 24px;
  --s8: 32px;
  --s12: 48px;
  --s18: 72px;
  --s24: 96px;

  /* ── radius (ponsfamily) ────────────────────────────────────────────── */
  --r-control: 10px;
  --r-field: 14px;
  --r-panel: 20px; /* ponsfamily --radius-panel */
  --r-card: 24px; /* ponsfamily --radius-card  */
  --r-pill: 999px;

  /* ── motion ─────────────────────────────────────────────────────────── */
  --d-micro: 0.1s;
  --d-short: 0.18s;
  --d-medium: 0.28s;
  --d-long: 0.52s;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);

  --focus: 0 0 0 2px var(--ink), 0 0 0 4px var(--accent);
  --shadow-card: 0 2px 12px #00000047;
  --shadow-soft: 0 4px 24px #00000059;
}

/* The reference app is dark-only and so is ponsfamily's own dark theme, which
   is the palette being cloned. Light is not a supported mode; declaring the
   scheme stops the UA painting white behind us mid-load. */
:root {
  color-scheme: dark;
}