/* ==========================================================================
   Purple Door Security — Design Tokens
   Derived from common/brand.tokens.json. That file is the source of truth.
   ========================================================================== */

:root {
  /* --- Brand purple -------------------------------------------------------
     Rehued +20° 2026-07-20 to align the whole ramp with the new logo mark's
     warmer magenta-purple (the mark's own gradients are bespoke, not from
     this ramp — see brand.tokens.json's logo section — but the ramp now
     sits in the same family instead of reading as a cooler blue-violet
     next to it). purple-400 is additionally darkened ~6% in lightness to
     hold its contrast where it's used as a button hover-fill against white
     text. This superseded a narrower, UI-only "accent" pair (same 500/400
     values, different names) from the same day — see AGENTS.md/MEMORY.md;
     that split existed only because retuning the shared ramp in place
     would have unevened the door panel's own gradient (.door__face
     sandwiches purple-500 between 600/700), which a whole-ramp shift
     doesn't do, since every step moves together.
     RGB triplets exist for every step because door.css leans on rgba()
     literals for glows/borders far more than it uses the hex directly —
     before this rework those literals hardcoded the OLD numbers with no
     token backing them at all. */
  --pd-purple-900: #270b33;
  --pd-purple-800: #441259;
  --pd-purple-700: #601d80;
  --pd-purple-600: #8d2bc0;
  --pd-purple-500: #ac3fd4; /* PRIMARY */
  --pd-purple-400: #b951e4;
  --pd-purple-300: #dba3f5;
  --pd-purple-200: #f6dcff;

  --pd-purple-900-rgb: 39, 11, 51;
  --pd-purple-800-rgb: 68, 18, 89;
  --pd-purple-700-rgb: 96, 29, 128;
  --pd-purple-600-rgb: 141, 43, 192;
  --pd-purple-500-rgb: 172, 63, 212;
  --pd-purple-400-rgb: 185, 81, 228;
  --pd-purple-300-rgb: 219, 163, 245;
  --pd-purple-200-rgb: 246, 220, 255;

  /* --- Threshold light (the light behind the door) -----------------------
     A pink-lilac light, not a warm white one. Two reasons: it keeps the whole
     identity inside the purple family instead of fighting it with amber, and
     it is materially dimmer — Threshold 500 has a relative luminance of 0.47
     against the old amber's 0.73. The scene stays semi-dark, and stepping
     through the door doesn't flashbang anyone.
     Deliberately no pure white anywhere in this ramp. */
  --pd-light-500: #dda0f0; /* SECONDARY — 9.9:1 on Void */
  --pd-light-400: #efc7fb; /* 13.6:1 */
  --pd-light-300: #fbeaff; /* 17.6:1 — the core only, never a large field */

  /* Falloff for the light source's own gradients */
  --pd-light-mid: #a85fd0;
  --pd-light-deep: #4e1a6b;

  /* --- Neutrals --------------------------------------------------------- */
  --pd-void: #08060f;
  --pd-ink: #100c1c;
  --pd-slate: #1c1630;
  --pd-ash: #2a2242;
  --pd-mute: #a79bc4;
  --pd-text: #ede9f6;
  --pd-white: #ffffff;

  /* --- Semantic --------------------------------------------------------- */
  --pd-success: #4ade9b;
  --pd-warning: #f5c97a;
  --pd-danger: #ff6b6b;
  --pd-info: #6bc5ff;

  /* --- Typography ------------------------------------------------------- */
  --pd-font-display: "Space Grotesk", "Söhne", ui-sans-serif, system-ui,
    -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --pd-font-body: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
    Roboto, Helvetica, Arial, sans-serif;
  --pd-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "Cascadia Mono",
    Menlo, Consolas, monospace;

  --pd-text-xs: clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem);
  --pd-text-sm: clamp(0.875rem, 0.85rem + 0.15vw, 0.9375rem);
  --pd-text-base: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  --pd-text-lg: clamp(1.125rem, 1.05rem + 0.35vw, 1.25rem);
  --pd-text-xl: clamp(1.375rem, 1.25rem + 0.6vw, 1.625rem);
  --pd-text-2xl: clamp(1.75rem, 1.5rem + 1.2vw, 2.25rem);
  --pd-text-3xl: clamp(2.25rem, 1.8rem + 2.2vw, 3.25rem);
  --pd-text-4xl: clamp(2.75rem, 2rem + 3.6vw, 4.5rem);

  --pd-leading-tight: 1.1;
  --pd-leading-snug: 1.25;
  --pd-leading-normal: 1.6;
  --pd-leading-relaxed: 1.75;

  --pd-tracking-tight: -0.02em;
  --pd-tracking-wide: 0.02em;
  --pd-tracking-caps: 0.14em;

  /* --- Space (4px grid) -------------------------------------------------- */
  --pd-space-1: 0.25rem;
  --pd-space-2: 0.5rem;
  --pd-space-3: 0.75rem;
  --pd-space-4: 1rem;
  --pd-space-5: 1.5rem;
  --pd-space-6: 2rem;
  --pd-space-7: 3rem;
  --pd-space-8: 4rem;
  --pd-space-9: 6rem;
  --pd-space-10: 8rem;

  /* --- Radius ----------------------------------------------------------- */
  --pd-radius-sm: 6px;
  --pd-radius-md: 10px;
  --pd-radius-lg: 16px;
  --pd-radius-xl: 24px;
  --pd-radius-pill: 999px;

  /* --- Elevation -------------------------------------------------------- */
  --pd-shadow-sm: 0 1px 2px rgba(8, 6, 15, 0.4);
  --pd-shadow-md: 0 8px 24px -8px rgba(8, 6, 15, 0.7);
  --pd-shadow-lg: 0 24px 64px -16px rgba(8, 6, 15, 0.85);
  --pd-glow-purple: 0 0 48px -8px rgba(var(--pd-purple-500-rgb), 0.55);
  --pd-glow-threshold: 0 0 64px -4px rgba(221, 160, 240, 0.45);

  /* RGB triplets so alpha variants don't hardcode the hex twice */
  --pd-light-500-rgb: 221, 160, 240;
  --pd-light-400-rgb: 239, 199, 251;
  --pd-light-300-rgb: 251, 234, 255;

  /* --- Motion ----------------------------------------------------------- */
  --pd-dur-fast: 160ms;
  --pd-dur-base: 280ms;
  --pd-dur-slow: 560ms;
  --pd-dur-door: 1500ms;
  --pd-dur-camera: 2400ms;
  /* The camera holds still until the door is visibly moving, so the push
     reads as a response to the opening rather than a jump cut. */
  --pd-delay-camera: 320ms;
  --pd-delay-reveal: 1500ms;

  --pd-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --pd-ease-entrance: cubic-bezier(0.16, 1, 0.3, 1);
  --pd-ease-door: cubic-bezier(0.62, 0.02, 0.2, 1);
  /* Slow start, long acceleration, gentle arrival — a walk, not a lurch. */
  --pd-ease-camera: cubic-bezier(0.5, 0, 0.32, 1);

  /* --- Layout ----------------------------------------------------------- */
  --pd-measure: 68ch;
  --pd-container: 1180px;
  --pd-gutter: clamp(1.25rem, 4vw, 3rem);
}

/*
 * Brand-face loading.
 *
 * Deliberately no CDN / Google Fonts request: a security consultancy should not
 * leak visitor IPs to a third party for a typeface, and the page must render
 * fully offline. Drop licensed WOFF2 files into frontend/assets/fonts/ and
 * uncomment below; the stacks above degrade to high-quality system faces until
 * then, with metrics close enough that no reflow is visible.
 */
/*
@font-face {
  font-family: "Space Grotesk";
  src: url("../assets/fonts/SpaceGrotesk-Variable.woff2") format("woff2-variations");
  font-weight: 300 700;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../assets/fonts/Inter-Variable.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-display: swap;
}
*/