/*
 * Frisky & Corset — storefront theme.
 *
 * This is the visual identity layer that sits on top of the base
 * storefront stylesheet (`/themes/_base/theme.css`). The base owns
 * structure (layout, sizing, positioning, breakpoints); this file
 * owns the brand:
 *
 *   - Palette tokens (--fc-wine, --fc-paper, --fc-rose-gold, etc.)
 *   - Typography choices (Playfair Display + Inter, exposed as
 *     --fc-font-display + --fc-font-sans)
 *   - Brand-specific decorative effects (the foil-gradient wordmark,
 *     rose-gold drop-shadows on the brand emblem, the italic Playfair
 *     flourishes that carry the "atelier" voice)
 *
 * A peer theme (e.g. `acme-shop/theme.css`) would redefine the same
 * `--fc-*` tokens and font vars, and override or omit the decorative
 * selectors below. The class names stay `.wcy-*` (the engine's default
 * storefront prefix); only the values change.
 *
 * See `docs/ui/theming.md` for the full theming contract.
 */

:root {
    /* -------------------------------------------------------------- */
    /* Brand palette                                                  */
    /* -------------------------------------------------------------- */
    --fc-wine: #6F1D2A;
    --fc-wine-dark: #4F121C;
    --fc-wine-deep: #2C0810;
    --fc-rose-gold: #C2A878;
    --fc-rose-gold-soft: #D9C49A;
    --fc-blush: #E8C5BE;
    --fc-paper: #FAF5EE;
    --fc-paper-soft: #faf3ef;
    --fc-paper-rule: #E3D8C9;
    --fc-ink: #1E1217;
    --fc-ink-mute: #5C4452;
    --fc-noir: #0A0508;

    /* -------------------------------------------------------------- */
    /* Spacing rhythm                                                 */
    /* -------------------------------------------------------------- */
    --fc-radius: 0.35rem;

    /* -------------------------------------------------------------- */
    /* Typography                                                     */
    /* The base stylesheet references these vars via                  */
    /* `font-family: var(--fc-font-display, ...)` — overriding here   */
    /* re-skins every storefront class without touching the base.    */
    /* -------------------------------------------------------------- */
    --fc-font-display: 'Playfair Display', Georgia, serif;
    --fc-font-sans: 'Inter', 'Helvetica Neue', Arial, sans-serif;

    /* -------------------------------------------------------------- */
    /* Engine-shared loader accent                                    */
    /* The Frisky theme paints the steampunk gears in rose-gold over  */
    /* a deep-wine wash.                                              */
    /* -------------------------------------------------------------- */
    --wcy-loader-accent: var(--fc-rose-gold);
    --wcy-loader-bg: rgba(44, 8, 16, 0.92);
}

/* ---------------------------------------------------------------- */
/* Italic accent on the major display surfaces                      */
/* The brand voice leans theatrical; italics on the major headings  */
/* land that "atelier" cadence. A peer theme can omit these for a   */
/* more upright voice without restructuring the layout.             */
/* ---------------------------------------------------------------- */
h1, .wcy-display {
    font-style: italic;
}
.wcy-hero h1,
.wcy-parallax h2,
.wcy-section-header h2 {
    font-style: italic;
}

/* ---------------------------------------------------------------- */
/* Goddess-emblem wordmark — the F&C brand signature                */
/* Hairline rose-gold medallion (inline SVG) flanked by the italic  */
/* Playfair wordmark with a champagne-to-rose-gold foil gradient    */
/* painted into the letterforms via background-clip:text. Hover     */
/* deepens the wine and brightens the emblem with a gentle glow.    */
/* A peer theme would typically swap the gradient stops for its own */
/* brand colours — or drop background-clip entirely for a flat      */
/* wordmark.                                                        */
/* ---------------------------------------------------------------- */
.wcy-brand {
    font-style: italic;
}
.wcy-brand-emblem {
    filter: drop-shadow(0 1px 1px rgba(112, 30, 50, 0.18));
    transition: filter 0.25s ease, transform 0.25s ease;
}
.wcy-brand-wordmark {
    background: linear-gradient(180deg,
        var(--fc-wine-deep, #4a1530) 0%,
        var(--fc-wine, #701e32) 25%,
        var(--fc-rose-gold, #d6a89c) 60%,
        #c2a878 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--fc-wine, #701e32);
}
.wcy-brand .wcy-brand-amp {
    /* The ampersand stays in its own bracketed gradient — slightly
       lighter so it reads as a graphic flourish rather than a
       letter. */
    background: linear-gradient(180deg,
        var(--fc-rose-gold, #d6a89c) 0%,
        #c2a878 50%,
        var(--fc-rose-gold-soft, #f0d4cc) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--fc-rose-gold, #d6a89c);
}
.wcy-brand:hover .wcy-brand-emblem {
    filter: drop-shadow(0 0 6px rgba(214, 168, 156, 0.55))
            drop-shadow(0 1px 1px rgba(112, 30, 50, 0.2));
    transform: rotate(-3deg);
}
.wcy-brand:hover .wcy-brand-wordmark {
    background: linear-gradient(180deg,
        var(--fc-wine-deep, #4a1530) 0%,
        var(--fc-wine, #701e32) 40%,
        var(--fc-rose-gold, #d6a89c) 90%,
        #c2a878 100%);
    -webkit-background-clip: text;
    background-clip: text;
}

/* ---------------------------------------------------------------- */
/* Hero atelier voice                                               */
/* Italic display weight + rose-gold accent on the highlighted      */
/* phrase ("Laced for the <em>occasion</em>"). Structural sizing    */
/* + position lives in the base.                                    */
/* ---------------------------------------------------------------- */
.wcy-hero h1 {
    font-weight: 500;
    font-style: italic;
}
.wcy-hero h1 em {
    font-style: normal;
    color: var(--fc-rose-gold);
}

/* Parallax bands — same italic atelier voice on the headline. */
.wcy-parallax h2 {
    font-style: italic;
    font-weight: 600;
}

/* ---------------------------------------------------------------- */
/* Banner-tab italic display font on the PDP banner tabs            */
/* ---------------------------------------------------------------- */
.wcy-banner-tab {
    font-style: italic;
}
.wcy-banner-tab-title {
    font-style: italic;
}

/* Section header h2 — italic display flourish. */
.wcy-section-header h2 {
    font-style: italic;
}

/* ---------------------------------------------------------------- */
/* Footer wordmark — same foil gradient at smaller scale            */
/* ---------------------------------------------------------------- */
.wcy-footer-brand .wcy-brand-wordmark {
    background: linear-gradient(180deg,
        var(--fc-wine-deep, #4a1530) 0%,
        var(--fc-wine, #701e32) 25%,
        var(--fc-rose-gold, #d6a89c) 60%,
        #c2a878 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--fc-wine, #701e32);
    font-style: italic;
}