/* Shared chrome for the Purple+ download surface: tokens, body, nav frame,
   brand mark, eyebrow pill, footer, and animations. Loaded by both
   index.html and 404.html so brand color tweaks live in one place.
   Tokens lifted from letsgopurple.com's Tailwind v4 theme. */

:root {
    --bg:            #fbfaf8;     /* warm cream, brand paper */
    --surface:       #ffffff;
    --heading:       #18181b;     /* zinc-900 */
    --body:          #52525b;     /* zinc-600 */
    --muted:         #71717a;     /* zinc-500 */
    --faint:         #a1a1aa;     /* zinc-400 */
    --border:        #e4e4e7;     /* zinc-200 */
    --border-soft:   #ececef;

    --purple-50:     #f5f0fa;
    --purple-100:    #ebe1f6;
    --purple-200:    #d4bfe9;
    --purple-300:    #b894d9;
    --purple-500:    #753cbe;     /* primary */
    --purple-600:    #5c2d99;     /* hover */
    --purple-700:    #442172;     /* active */

    --green-500:     #6bb700;     /* brand status-available, used for "signed" */
    --red-500:       #e73550;     /* brand status-busy, used for errors */

    --shadow-card:        0 1px 3px rgba(20, 14, 32, 0.06), 0 1px 2px rgba(20, 14, 32, 0.04);
    --shadow-card-hover:  0 4px 14px rgba(20, 14, 32, 0.10), 0 2px 4px rgba(20, 14, 32, 0.05);
    --shadow-purple:      0 1px 2px rgba(117, 60, 190, 0.18), 0 10px 28px -8px rgba(117, 60, 190, 0.45);

    --display: "Sora", system-ui, -apple-system, sans-serif;
    --text:    "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;

    --ease: cubic-bezier(0.25, 1, 0.5, 1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { color-scheme: light; }

body {
    font-family: var(--text);
    color: var(--body);
    background: var(--bg);
    font-size: 16px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
}

/* Very faint purple wash, top-right corner. Subtle enough to read as
   "warm paper with a brand undertone" rather than a colored backdrop. */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    background: radial-gradient(ellipse 70% 50% at 100% 0%, var(--purple-50) 0%, transparent 60%);
    pointer-events: none;
    z-index: 0;
}

.container {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 clamp(24px, 5vw, 48px);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--display);
    color: var(--heading);
    font-weight: 700;
}

.nav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 72px;
}

.brand {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    color: var(--heading);
}
.brand-logo { height: 38px; width: auto; display: block; flex-shrink: 0; }

.nav-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--text);
    font-size: 14px;
    font-weight: 500;
    color: var(--body);
    text-decoration: none;
    transition: color 150ms;
}
.nav-link:hover { color: var(--purple-500); }
.nav-link .arrow { transition: transform 200ms var(--ease); }
.nav-link:hover .arrow { transform: translateX(3px); }

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: var(--purple-50);
    color: var(--purple-500);
    border-radius: 999px;
    font-family: var(--text);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.03em;
    margin-bottom: 24px;
}
.eyebrow .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--purple-500);
}

.footer {
    border-top: 1px solid var(--border-soft);
}
.footer-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 24px;
    /* padding-block (not shorthand) so .container's horizontal padding
       isn't zeroed out -- otherwise space-between pushes items past
       the rest of the page content's left/right boundary. */
    padding-block: 24px;
    font-size: 12.5px;
    color: var(--faint);
}
.footer a {
    color: var(--body);
    text-decoration: none;
    transition: color 150ms;
}
.footer a:hover { color: var(--purple-500); }

@keyframes fadeUp {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}