/* ============================================================
   FloreData — typography utilities + design system primitives
   Derived from `floredata/design/tokens.md` (Brand Identity PDF).

   - Satoshi Variable axis (100–900), roman + italic
   - Weight roles: Light 300 = H1/display, Medium 500 = body/CTAs,
     Bold Italic 700 = H2 + accent emphasis
   - Eyebrow tag, pill button (primary + ghost), section header pattern
   ============================================================ */

/* --- Reinforce element-level rules from theme.json (some blocks --- */
/* --- bypass element styles when they emit raw markup)            --- */

body {
    font-family: var(--wp--preset--font-family--satoshi);
    font-weight: 500;
    line-height: 1.55;
    background: var(--wp--preset--color--background);
    color: var(--wp--preset--color--text);
}

h1, .fd-h1 {
    font-family: var(--wp--preset--font-family--satoshi);
    font-weight: 300;
    line-height: 1.05;
    letter-spacing: -0.02em;
}

h2, .fd-h2 {
    font-family: var(--wp--preset--font-family--satoshi);
    font-weight: 700;
    font-style: italic;
    line-height: 1.15;
    letter-spacing: -0.01em;
}

h3, .fd-h3 {
    font-family: var(--wp--preset--font-family--satoshi);
    font-weight: 500;
    line-height: 1.2;
}

/* Italic-emphasis pattern: <em> inside any heading or .fd-accent class */
h1 em, h2 em, h3 em, .fd-accent {
    font-weight: 700;
    font-style: italic;
}

/* --- Eyebrow section tag (the lavender / colored chip above section H) --- */
.fd-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 0.375rem 0.875rem;
    border-radius: 999px;
    background: var(--wp--preset--color--bloom);
    color: var(--wp--preset--color--primary);
    line-height: 1;
}

.fd-eyebrow--sage   { background: var(--wp--preset--color--sage);     color: var(--wp--preset--color--growth); }
.fd-eyebrow--punchy { background: var(--wp--preset--color--punchy);   color: var(--wp--preset--color--growth); }
.fd-eyebrow--cream  { background: var(--wp--preset--color--dirty-cream); color: var(--wp--preset--color--text); }
.fd-eyebrow--mulberry { background: var(--wp--preset--color--mulberry); color: var(--wp--preset--color--primary); }

/* --- Pill button primitives (override core button style when needed) --- */
.fd-btn,
.wp-block-button.is-style-pill .wp-block-button__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.875rem 1.5rem;
    border-radius: 999px;
    font-family: var(--wp--preset--font-family--satoshi);
    font-weight: 500;
    font-size: 0.9375rem;
    text-decoration: none;
    line-height: 1;
    background: var(--wp--preset--color--primary);
    color: var(--wp--preset--color--text-inverse);
    border: none;
    cursor: pointer;
    transition: background-color 0.15s ease, transform 0.15s ease;
}

.fd-btn:hover,
.wp-block-button.is-style-pill .wp-block-button__link:hover {
    background: var(--wp--preset--color--royal);
    color: var(--wp--preset--color--text-inverse);
}

.fd-btn--ghost {
    background: transparent;
    color: var(--wp--preset--color--text);
    border: 1px solid var(--wp--preset--color--line);
}
.fd-btn--ghost:hover {
    background: var(--wp--preset--color--dirty-cream);
    color: var(--wp--preset--color--text);
}

.fd-btn--dark {
    background: var(--wp--preset--color--surface-dark);
    color: var(--wp--preset--color--text-inverse);
}
.fd-btn--dark:hover {
    background: var(--wp--preset--color--primary);
}

/* --- Section header pattern (eyebrow + H2 stacked) --- */
.fd-section-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    text-align: center;
    margin-bottom: 3rem;
}

.fd-section-header--left {
    align-items: flex-start;
    text-align: left;
}

/* --- Card primitives --- */
.fd-card {
    background: var(--wp--preset--color--surface);
    border-radius: 24px;
    padding: 2rem;
}

.fd-card--cream { background: var(--wp--preset--color--dirty-cream); }
.fd-card--sage  { background: var(--wp--preset--color--sage); }
.fd-card--mulberry { background: var(--wp--preset--color--mulberry); }
.fd-card--dark  { background: var(--wp--preset--color--surface-dark); color: var(--wp--preset--color--text-inverse); }

/* Card hover lift */
.fd-card--interactive {
    transition: transform 0.18s ease, box-shadow 0.18s ease;
    cursor: pointer;
}
.fd-card--interactive:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(40, 40, 57, 0.12);
}

/* --- Site container + section padding --- */
.fd-container {
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
    padding-left: clamp(1rem, 3vw, 2rem);
    padding-right: clamp(1rem, 3vw, 2rem);
}

.fd-section {
    padding-top: clamp(3rem, 6vw, 6rem);
    padding-bottom: clamp(3rem, 6vw, 6rem);
}

.fd-section--tight {
    padding-top: clamp(2rem, 4vw, 4rem);
    padding-bottom: clamp(2rem, 4vw, 4rem);
}

/* --- Reduced motion: kill transforms/transitions cleanly --- */
@media (prefers-reduced-motion: reduce) {
    .fd-card--interactive,
    .fd-btn,
    .wp-block-button .wp-block-button__link {
        transition: none !important;
    }
    .fd-card--interactive:hover {
        transform: none;
    }
}