@import url("https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@400;500;600;700;800&family=DM+Serif+Display&family=Figtree:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;700&family=Space+Grotesque:wght@400;500;700&display=swap");

body.passlord-shell-active {
    --ph-font-display: "Bricolage Grotesque", system-ui, sans-serif;
    --ph-font-ui: "Figtree", system-ui, sans-serif;
    --ph-font-mono: "JetBrains Mono", ui-monospace, monospace;

    --ph-bg: #f4f1e8;
    --ph-bg-2: #fffdf6;
    --ph-card: rgba(255, 253, 246, 0.92);
    --ph-card-strong: #fffaf0;
    --ph-ink: #0a2540;
    --ph-ink-2: #3a5578;
    --ph-ink-3: #6a7f99;
    --ph-line: rgba(10, 37, 64, 0.1);

    --ph-brand: #0e4c92;
    --ph-brand-2: #1a6fd6;
    --ph-brand-deep: #062b55;
    --ph-accent: #ffd429;
    --ph-accent-2: #ffb800;
    --ph-coral: #ff6b5b;
    --ph-mint: #3ecf8e;
    --ph-grape: #8b5cf6;
    --ph-shadow-sm: 0 10px 26px rgba(10, 37, 64, 0.08);
    --ph-shadow-lg: 0 28px 70px rgba(10, 37, 64, 0.12);
    --ph-shadow-pop: 6px 6px 0 var(--ph-ink);
    --ph-radius-s: 12px;
    --ph-radius-m: 18px;
    --ph-radius-l: 28px;
    --ph-radius-xl: 36px;
    --ph-wrap: var(--layout-wide-max);
    --ph-gap: 24px;
    --ph-section-space: 96px;
}

body.dark.passlord-shell-active,
html[data-mode="dark"] body.passlord-shell-active {
    --ph-bg: #081525;
    --ph-bg-2: #10253b;
    --ph-card: rgba(13, 26, 43, 0.9);
    --ph-card-strong: #102741;
    --ph-ink: #f6f1df;
    --ph-ink-2: #c8d4e6;
    --ph-ink-3: #8ea3c1;
    --ph-line: rgba(160, 187, 222, 0.16);
    --ph-shadow-sm: 0 14px 32px rgba(0, 0, 0, 0.2);
    --ph-shadow-lg: 0 28px 70px rgba(0, 0, 0, 0.34);
    --ph-shadow-pop: 6px 6px 0 #000000;
}

html[data-density="compact"] body.passlord-homepage {
    --ph-gap: 16px;
    --ph-section-space: 64px;
}

html[data-density="cozy"] body.passlord-homepage {
    --ph-gap: 24px;
    --ph-section-space: 96px;
}

html[data-density="spacious"] body.passlord-homepage {
    --ph-gap: 32px;
    --ph-section-space: 132px;
}

html[data-palette="forest"] body.passlord-homepage {
    --ph-brand: #166534;
    --ph-brand-2: #22a55c;
    --ph-brand-deep: #0b3b1c;
    --ph-accent: #f5e050;
    --ph-accent-2: #e6c63a;
    --ph-coral: #f56e4a;
    --ph-mint: #7ce0a5;
    --ph-grape: #7a5af8;
}

html[data-palette="sunset"] body.passlord-homepage {
    --ph-brand: #c2410c;
    --ph-brand-2: #f97316;
    --ph-brand-deep: #7c2d12;
    --ph-accent: #ffe066;
    --ph-accent-2: #ffc23b;
    --ph-coral: #e11d48;
    --ph-mint: #14b8a6;
    --ph-grape: #7c3aed;
}

html[data-palette="berry"] body.passlord-homepage {
    --ph-brand: #6d28d9;
    --ph-brand-2: #a855f7;
    --ph-brand-deep: #4c1d95;
    --ph-accent: #f9e03b;
    --ph-accent-2: #f2c200;
    --ph-coral: #ec4899;
    --ph-mint: #22d3ee;
    --ph-grape: #f472b6;
}

html[data-typo="grotesque"] body.passlord-homepage {
    --ph-font-display: "Space Grotesque", system-ui, sans-serif;
    --ph-font-ui: "Space Grotesque", system-ui, sans-serif;
}

html[data-typo="serif"] body.passlord-homepage {
    --ph-font-display: "DM Serif Display", Georgia, serif;
}

html[data-mode="dark"] body.passlord-homepage {
    --ph-bg: #081525;
    --ph-bg-2: #10253b;
    --ph-card: rgba(13, 26, 43, 0.9);
    --ph-card-strong: #102741;
    --ph-ink: #f6f1df;
    --ph-ink-2: #c8d4e6;
    --ph-ink-3: #8ea3c1;
    --ph-line: rgba(160, 187, 222, 0.16);
    --ph-shadow-sm: 0 14px 32px rgba(0, 0, 0, 0.2);
    --ph-shadow-lg: 0 28px 70px rgba(0, 0, 0, 0.34);
    --ph-shadow-pop: 6px 6px 0 #000000;
}

body.passlord-homepage {
    background:
        radial-gradient(circle at top left, rgba(255, 212, 41, 0.12), transparent 26%),
        radial-gradient(circle at top right, rgba(26, 111, 214, 0.14), transparent 24%),
        linear-gradient(180deg, var(--ph-bg), color-mix(in srgb, var(--ph-bg) 84%, white));
    color: var(--ph-ink);
    overflow-x: hidden; /* prevent decorative chips from creating an horizontal scroll on mobile */
}

body.passlord-homepage,
body.passlord-homepage input,
body.passlord-homepage button,
body.passlord-homepage textarea,
body.passlord-homepage select {
    font-family: var(--ph-font-ui);
}

body.passlord-homepage .ph-home {
    color: var(--ph-ink);
}

body.passlord-homepage #container,
body.passlord-homepage #page-content {
    width: 100% !important;
    max-width: none !important;
}

body.passlord-homepage .ph-wrap {
    width: min(100%, var(--ph-wrap));
    margin: 0 auto;
    padding: 0 clamp(20px, 2.5vw, 40px);
}

body.passlord-homepage h1,
body.passlord-homepage h2,
body.passlord-homepage h3,
body.passlord-homepage h4,
body.passlord-homepage h5 {
    font-family: var(--ph-font-display);
}

body.passlord-homepage .ph-home a {
    color: inherit;
    text-decoration: none;
}

body.passlord-homepage .ph-home img {
    display: block;
    max-width: 100%;
}

body.passlord-homepage .ph-home button {
    border: 0;
    background: transparent;
    cursor: pointer;
}

body.passlord-homepage .ph-home input,
body.passlord-homepage .ph-home button,
body.passlord-homepage .ph-home details,
body.passlord-homepage .ph-home summary {
    font: inherit;
}

@media (max-width: 767px) {
    body.passlord-homepage .ph-wrap {
        padding: 0 16px;
    }
}