/* ZHE'S COFFEE · v0.9 shared public-page theme */

:root {
    --mist-white: #F6F7F4;
    --quartz-milk: #FBFAF4;
    --oat-sand: #E2DED0;
    --graphite: #303638;
    --rain-blue: #C4D0D4;
    --sage-mist: #CBD3C9;
    --stone-blush: #D8C4C1;
    --denim: #5A6B75;
    --v09-line: rgba(48, 54, 56, 0.14);
    --v09-line-strong: rgba(48, 54, 56, 0.28);
    --v09-shadow: 0 26px 70px -48px rgba(48, 54, 56, 0.56);

    /* Legacy aliases. Keep old page CSS on the same visual language. */
    --oatmeal: var(--oat-sand);
    --quartz: var(--quartz-milk);
    --paper: var(--quartz-milk);
    --sand: var(--oat-sand);
    --blush: var(--stone-blush);
    --ash: var(--graphite);
    --ink: var(--graphite);
    --deep: var(--graphite);
    --light-deep: var(--graphite);
    --slate: var(--denim);
    --slate-soft: #7B8C96;
    --denim: #5A6B75;
    --quartz-vein: var(--quartz-milk);
    --light-amber: var(--denim);
    --rust: var(--stone-blush);
    --moss: var(--sage-mist);
    --muted: rgba(48, 54, 56, 0.66);
    --line: var(--v09-line);
    --gold-soft: rgba(196, 208, 212, 0.28);
    --gold-line: rgba(90, 107, 117, 0.36);
    --base: var(--mist-white);
    --paper-line: rgba(48, 54, 56, 0.025);
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 7rem;
}

body.v09-site {
    overflow-x: hidden;
    color: var(--graphite);
    background-color: var(--mist-white) !important;
    background-image:
        radial-gradient(circle at 8% 5%, rgba(196, 208, 212, 0.24), transparent 28rem),
        radial-gradient(circle at 92% 24%, rgba(216, 196, 193, 0.16), transparent 22rem),
        linear-gradient(rgba(48, 54, 56, 0.025) 1px, transparent 1px) !important;
    background-size: auto, auto, 100% 88px;
}

body.v09-site *,
body.v09-site *::before,
body.v09-site *::after {
    box-sizing: border-box;
}

body.v09-site a,
body.v09-site button,
body.v09-site input,
body.v09-site textarea,
body.v09-site select {
    font-family: inherit;
}

body.v09-site :focus-visible {
    outline: 3px solid var(--denim);
    outline-offset: 4px;
}

body.v09-site .home-header,
body.v09-site .site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 1.5rem;
    padding: 0.75rem max(1.25rem, env(safe-area-inset-right)) 0.75rem max(1.25rem, env(safe-area-inset-left));
    border-bottom: 1px solid rgba(48, 54, 56, 0.1);
    background: rgba(246, 247, 244, 0.88);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

body.v09-site .home-logo,
body.v09-site .brand-link img {
    display: block;
    width: 4.5rem;
    height: 4.5rem;
    object-fit: contain;
}

body.v09-site .brand-link {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    color: var(--graphite);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.14em;
}

body.v09-site .home-nav,
body.v09-site .nav-links {
    display: flex;
    min-width: 0;
    flex-wrap: nowrap;
    justify-content: flex-end;
    gap: 0.5rem;
    overflow-x: auto;
    padding: 0.25rem 0;
    color: rgba(48, 54, 56, 0.66);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.08em;
    scrollbar-width: none;
}

body.v09-site .home-nav::-webkit-scrollbar,
body.v09-site .nav-links::-webkit-scrollbar {
    display: none;
}

body.v09-site .home-nav a,
body.v09-site .nav-links a {
    position: relative;
    display: inline-flex;
    flex: 0 0 auto;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    padding: 0.55rem 0.95rem;
    border: 1px solid rgba(48, 54, 56, 0.14);
    border-radius: 999px;
    color: inherit;
    background: rgba(251, 250, 244, 0.58);
    text-decoration: none;
    transition: transform 180ms ease, background-color 180ms ease, border-color 180ms ease;
}

body.v09-site .home-nav a:hover,
body.v09-site .nav-links a:hover {
    border-color: rgba(90, 107, 117, 0.46);
    background: var(--quartz-milk);
    transform: translateY(-1px);
}

body.v09-site .home-nav a[aria-current="page"]::after,
body.v09-site .nav-links a[aria-current="page"]::after {
    content: "";
    position: absolute;
    right: 50%;
    bottom: 4px;
    width: 16px;
    height: 2px;
    border-radius: 1px;
    background: var(--denim);
    transform: translateX(50%);
}

body.v09-site .page-hero,
body.v09-site .quiz-hero {
    color: var(--graphite);
}

body.v09-site .page-title,
body.v09-site .quiz-title,
body.v09-site h1,
body.v09-site h2,
body.v09-site h3,
body.v09-site h4 {
    color: var(--graphite);
}

body.v09-site .eyebrow,
body.v09-site .quiz-eyebrow,
body.v09-site .v09-kicker {
    color: var(--denim);
}

body.v09-site .eyebrow,
body.v09-site .quiz-eyebrow {
    border-color: rgba(90, 107, 117, 0.28);
    background: rgba(251, 250, 244, 0.74);
}

body.v09-site .light-card,
body.v09-site .article-card,
body.v09-site .panel-cta,
body.v09-site .auth-card,
body.v09-site .founder-panel,
body.v09-site .result-panel,
body.v09-site .contact-card,
body.v09-site .form-card,
body.v09-site .compare-card,
body.v09-site .panel-card,
body.v09-site .schedule-item,
body.v09-site .rule-item,
body.v09-site .flow > div,
body.v09-site .price-table-wrap,
body.v09-site .alt-card,
body.v09-site .article-hero,
body.v09-site .glass-card,
body.v09-site .hero,
body.v09-site .panel,
body.v09-site .bean-card,
body.v09-site .stat,
body.v09-site .subscription-item,
body.v09-site .shipment-row {
    border-color: var(--v09-line);
    border-left-color: var(--rain-blue);
    border-radius: 14px;
    background: rgba(251, 250, 244, 0.84);
    box-shadow: var(--v09-shadow);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

body.v09-site .light-card:hover,
body.v09-site .panel-cta:hover,
body.v09-site .auth-card:hover,
body.v09-site .founder-panel:hover {
    border-color: rgba(90, 107, 117, 0.34);
    background: rgba(251, 250, 244, 0.94);
}

body.v09-site .light-card .stage-num,
body.v09-site .light-card .role-tag,
body.v09-site .state-card .state-num,
body.v09-site .result-stage .result-num,
body.v09-site .article-card .art-type,
body.v09-site .compare-card .proposal-eyebrow,
body.v09-site .compare-card .proposal-quote em,
body.v09-site .rule-item .rule-tag,
body.v09-site .flow .flow-num,
body.v09-site .price-table .proposal-label,
body.v09-site .narrative-label,
body.v09-site .timeline-year,
body.v09-site .gold-badge {
    color: var(--denim) !important;
}

body.v09-site .light-card .role-tag,
body.v09-site .article-card .art-type,
body.v09-site .compare-card .proposal-eyebrow,
body.v09-site .rule-item .rule-tag,
body.v09-site .flow .flow-num,
body.v09-site .gold-badge,
body.v09-site .state-card.is-selected {
    border-color: rgba(90, 107, 117, 0.3) !important;
    background: rgba(196, 208, 212, 0.28) !important;
}

body.v09-site .compare-card.gold,
body.v09-site .panel-card.gold {
    border-left-color: var(--rain-blue);
}

body.v09-site .price-table .col-proposal {
    background: rgba(196, 208, 212, 0.14) !important;
}

body.v09-site .price-table .col-recommend {
    background: rgba(196, 208, 212, 0.24) !important;
}

body.v09-site .narrative-block.gold {
    border-left-color: var(--rain-blue);
    background: linear-gradient(135deg, rgba(196, 208, 212, 0.22), rgba(251, 250, 244, 0.72));
}

body.v09-site .cta-primary,
body.v09-site .action.primary,
body.v09-site .feedback-form button,
body.v09-site .primary-action {
    border-color: var(--graphite);
    color: var(--quartz-milk);
    background: var(--graphite);
    box-shadow: 0 18px 42px -28px rgba(48, 54, 56, 0.9);
}

body.v09-site .cta-primary:hover,
body.v09-site .action.primary:hover,
body.v09-site .feedback-form button:hover,
body.v09-site .primary-action:hover {
    background: #242b2e;
    transform: translateY(-2px);
}

body.v09-site .cta-ghost,
body.v09-site .action,
body.v09-site .light-chip {
    border-color: rgba(48, 54, 56, 0.26);
    color: var(--graphite);
    background: rgba(251, 250, 244, 0.7);
}

body.v09-site .cta-ghost:hover,
body.v09-site .action:hover,
body.v09-site .light-chip:hover {
    border-color: rgba(90, 107, 117, 0.46);
    color: var(--graphite);
    background: rgba(196, 208, 212, 0.28);
}

body.v09-site .article-body a,
body.v09-site .article-citation a,
body.v09-site .auth-help a,
body.v09-site .faq-item a {
    color: var(--denim);
}

body.v09-site footer,
body.v09-site .footer {
    color: rgba(48, 54, 56, 0.58);
    border-top-color: var(--v09-line) !important;
    background: rgba(251, 250, 244, 0.6) !important;
}

/* Body copy and legacy inline accents that predate v0.9. */
body.v09-site [style*="#8A6B2C"],
body.v09-site [style*="#C6A15B"] {
    color: var(--denim) !important;
}

body.v09-site [style*="rgba(198, 161, 91"],
body.v09-site [style*="rgba(198,161,91"] {
    border-color: rgba(90, 107, 117, 0.32) !important;
    background: rgba(196, 208, 212, 0.28) !important;
}

body.v09-site .status-cancelled,
body.v09-site .status-failed {
    border-color: rgba(216, 196, 193, 0.72) !important;
    color: var(--graphite) !important;
    background: rgba(216, 196, 193, 0.42) !important;
}

/* Blend catalog cards share the homepage light-card language. */
body.v09-catalog .blend-catalog-grid {
    width: min(1200px, calc(100% - 3rem));
    margin: 0 auto;
    padding-bottom: 24px;
}

body.v09-catalog .blend-catalog-card {
    border-radius: 0;
    transition: transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
}

body.v09-catalog .blend-catalog-card:hover {
    border-color: rgba(90, 107, 117, 0.34);
    box-shadow: 0 24px 56px -30px rgba(48, 54, 56, 0.42);
    transform: translateY(-4px);
}

body.v09-catalog .blend-catalog-card:hover .home-light-art img {
    transform: scale(1.045);
}

body.v09-catalog .blend-catalog-card .light-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: auto;
}

body.v09-catalog .blend-catalog-card .light-actions a,
body.v09-catalog .blend-catalog-card .light-actions .light-status {
    display: inline-flex;
    align-items: center;
    min-height: 2.2rem;
    padding: 0.45rem 0.85rem;
    border: 1px solid rgba(48, 54, 56, 0.18);
    border-radius: 999px;
    color: var(--graphite);
    background: rgba(251, 250, 244, 0.72);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-decoration: none;
}

body.v09-catalog .blend-catalog-card .light-actions a.primary {
    border-color: var(--graphite);
    color: var(--quartz-milk);
    background: var(--graphite);
}

body.v09-catalog .blend-catalog-card .light-actions a:hover {
    border-color: var(--denim);
    color: var(--graphite);
    background: rgba(196, 208, 212, 0.28);
    transform: translateY(-1px);
}

body.v09-catalog .blend-catalog-card .light-actions a.primary:hover {
    color: var(--quartz-milk);
    background: #242b2e;
}

body.v09-catalog .blend-catalog-card .light-actions .light-status {
    color: rgba(48, 54, 56, 0.58);
    background: rgba(48, 54, 56, 0.06);
}

@media (max-width: 800px) {
    body.v09-site .home-header,
    body.v09-site .site-header {
        gap: 0.75rem;
        padding-top: max(0.6rem, env(safe-area-inset-top));
    }

    body.v09-site .home-logo,
    body.v09-site .brand-link img {
        width: 3.7rem;
        height: 3.7rem;
    }

    body.v09-site .home-nav,
    body.v09-site .nav-links {
        justify-content: flex-start;
    }

    body.v09-site .site-header {
        grid-template-columns: auto minmax(0, 1fr);
    }
}

@media (prefers-reduced-motion: reduce) {
    body.v09-site *,
    body.v09-site *::before,
    body.v09-site *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}