:root {
    /* ── Depth Layers (lifted — less crushing dark) ── */
    --p4p-bg: #0a0a12;
    --p4p-bg-deep: #06060e;
    --p4p-bg-elevated: #12121c;
    --p4p-surface: rgba(12, 12, 18, 0.88);
    --p4p-surface-2: rgba(20, 20, 30, 0.92);

    /* ── Text (high contrast hierarchy) ── */
    --p4p-text: #f1f5f9;
    --p4p-text-bright: #ffffff;
    --p4p-text-dim: #cbd5e1;
    --p4p-text-inv: #ffffff;
    --p4p-muted: #64748b;
    --p4p-muted-deep: #475569;

    /* ── Red spectrum ── */
    --p4p-red: #ff2d2d;
    --p4p-red-soft: #ff4444;
    --p4p-red-warm: #ff6b5f;
    --p4p-red-deep: #7f1d1d;
    --p4p-red-glow: rgba(255, 45, 45, 0.35);

    /* ── Purple spectrum ── */
    --p4p-purple: #7c3aed;
    --p4p-purple-soft: #a78bfa;
    --p4p-purple-deep: #4c1d95;
    --p4p-purple-glow: rgba(124, 58, 237, 0.3);

    /* ── Warm accents ── */
    --p4p-ember: #ff9a3d;
    --p4p-magenta: #ff2a6d;
    --p4p-magenta-soft: #ff6b99;
    --p4p-graphite: #1e1e2e;

    /* ── Primary accent (mellow warm — coral/amber) ── */
    --p4p-accent: #e8a87c;
    --p4p-accent-soft: #f0c4a0;
    --p4p-accent-deep: #c4845c;
    --p4p-accent-glow: rgba(232, 168, 124, 0.35);
    --p4p-accent-line: rgba(232, 168, 124, 0.22);
    --p4p-mesh-primary: #e8a87c;
    --p4p-mesh-secondary: #a78bfa;

    /* ── Lines & borders ── */
    --p4p-line: rgba(255, 45, 45, 0.15);
    --p4p-line-purple: rgba(124, 58, 237, 0.15);
    --p4p-line-white: rgba(255, 255, 255, 0.06);
    --p4p-line-strong: rgba(255, 255, 255, 0.1);

    /* ── Glows (refined, not overwhelming) ── */
    --p4p-glow-core: 0 0 20px rgba(255, 45, 45, 0.35), 0 0 50px rgba(124, 58, 237, 0.18);
    --p4p-glow-ambient: 0 0 80px rgba(255, 45, 45, 0.08), 0 0 120px rgba(124, 58, 237, 0.06);
    --p4p-glow: var(--p4p-glow-core), var(--p4p-glow-ambient);
    --p4p-glow-strong: 0 0 30px rgba(255, 45, 45, 0.4), 0 0 80px rgba(124, 58, 237, 0.25), 0 0 140px rgba(255, 45, 45, 0.1);
    --p4p-glow-red: 0 0 20px rgba(255, 45, 45, 0.3), 0 0 60px rgba(255, 45, 45, 0.08);
    --p4p-glow-purple: 0 0 20px rgba(124, 58, 237, 0.25), 0 0 60px rgba(124, 58, 237, 0.08);
    --p4p-text-glow: 0 0 12px rgba(255, 45, 45, 0.35), 0 0 30px rgba(124, 58, 237, 0.15);
    --p4p-text-glow-subtle: 0 0 8px rgba(255, 45, 45, 0.2);

    /* ── Gradients ── */
    --p4p-grad-hero: linear-gradient(180deg, rgba(6,6,10,0) 0%, rgba(6,6,10,0.6) 50%, rgba(2,2,3,1) 100%);
    --p4p-grad-metal: linear-gradient(135deg, #ffffff 0%, #ff6b5f 40%, #ff2a6d 70%, #a78bfa 100%);
    --p4p-grad-red-purple: linear-gradient(135deg, #ff2d2d 0%, #7c3aed 100%);
    --p4p-grad-warm: linear-gradient(135deg, #ff9a3d 0%, #ff2d2d 50%, #7c3aed 100%);

    /* ── Glass panels (blur depth) ── */
    --p4p-panel-bg: linear-gradient(160deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
    --p4p-panel-bg-active: linear-gradient(160deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
    --p4p-panel-border: rgba(255, 255, 255, 0.06);
    --p4p-panel-border-active: rgba(255, 45, 45, 0.25);
    --p4p-panel-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255,255,255,0.05);
    --p4p-panel-shadow-active: 0 12px 48px rgba(0, 0, 0, 0.5), 0 0 24px rgba(255, 45, 45, 0.1), inset 0 1px 0 rgba(255,255,255,0.08);

    /* ── Typography ── */
    --p4p-font-display: "Space Grotesk", system-ui, sans-serif;
    --p4p-font-ui: "Inter", system-ui, sans-serif;
    --p4p-font-tech: "JetBrains Mono", ui-monospace, monospace;

    /* ── Layout ── */
    --p4p-header: 72px;
    --p4p-timeline: 72px;
    --p4p-max: 1200px;
    --p4p-shell-x: clamp(1.5rem, 5vw, 3rem);
    --p4p-shell-gap: clamp(1rem, 2vh, 1.5rem);
    --p4p-section-pad: clamp(1.5rem, 6vh, 4rem);

    /* ── Motion ── */
    --p4p-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --p4p-ease-ultra: cubic-bezier(0.16, 1, 0.3, 1);
    --p4p-ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
    --p4p-duration-fast: 0.3s;
    --p4p-duration-normal: 0.6s;
    --p4p-duration-lux: 0.8s;
    --p4p-duration-glide: 0.9s;
    --p4p-transition-lux: transform 0.8s var(--p4p-ease-ultra), opacity 0.7s var(--p4p-ease-ultra), box-shadow 0.6s var(--p4p-ease);

    /* ── Radii ── */
    --p4p-radius-sm: 8px;
    --p4p-radius: 12px;
    --p4p-radius-lg: 20px;
    --p4p-radius-xl: 28px;
    --p4p-panel-radius: 16px;
    --p4p-panel-radius-lg: 24px;
}