/* =====================================================================
   Salvatore — brand foundation
   Used by every Salvatore widget. Design tokens, typography, helpers.
   ===================================================================== */

:root {
    /* Dark palette (kept for hero / footer / accents) */
    --sv-black: #0a0a0a;
    --sv-black-soft: #141210;
    --sv-ink: #1c1816;

    /* Light palette — the new dominant tone */
    --sv-cream: #f7f1e6;       /* default light section bg */
    --sv-cream-soft: #fbf7ee;  /* slight tint */
    --sv-bone: #f5efe6;        /* legacy text-on-dark */
    --sv-paper: #ffffff;       /* card bg */
    --sv-paper-warm: #fdfaf3;  /* warm white card */
    --sv-line-soft: rgba(28, 24, 22, 0.08);
    --sv-line-mid:  rgba(28, 24, 22, 0.14);

    /* Typography colors */
    --sv-text:        #1c1816;
    --sv-text-soft:   #4a3f37;
    --sv-text-muted:  #7a6f66;

    /* Brand accents */
    --sv-brown: #6b3f1d;
    --sv-brown-deep: #4a2a13;
    --sv-gold: #b78a3c;
    --sv-gold-soft: #d8b87a;
    --sv-line: rgba(183, 138, 60, 0.25);
    --sv-overlay: rgba(10, 10, 10, 0.55);

    /* Shadows for floating cards */
    --sv-shadow-sm: 0 4px 14px -6px rgba(28, 24, 22, 0.10), 0 1px 2px rgba(28, 24, 22, 0.04);
    --sv-shadow-md: 0 18px 40px -20px rgba(28, 24, 22, 0.18), 0 6px 16px -8px rgba(28, 24, 22, 0.10);
    --sv-shadow-lg: 0 40px 80px -30px rgba(28, 24, 22, 0.28), 0 14px 30px -14px rgba(28, 24, 22, 0.12);
    --sv-shadow-gold: 0 30px 60px -28px rgba(183, 138, 60, 0.45);

    /* Typography */
    --sv-font-display: 'Playfair Display', 'Cormorant Garamond', Georgia, serif;
    --sv-font-script: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
    --sv-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* Spacing rhythm */
    --sv-section-y: clamp(80px, 10vw, 160px);
    --sv-gutter: clamp(20px, 4vw, 64px);
    --sv-radius-sm: 14px;
    --sv-radius-md: 22px;
    --sv-radius-lg: 32px;

    /* Easing */
    --sv-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --sv-ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Section wrapper — used by every widget. */
.salvatore-section {
    font-family: var(--sv-font-body);
    color: var(--sv-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.salvatore-section * {
    box-sizing: border-box;
}

/* Light/dark scopes flip text colors automatically. */
.salvatore-section.is-dark {
    color: var(--sv-bone);
}

.salvatore-section h1,
.salvatore-section h2,
.salvatore-section h3,
.salvatore-section h4 {
    font-family: var(--sv-font-display);
    font-weight: 500;
    margin: 0;
    line-height: 1.05;
    letter-spacing: -0.01em;
    color: inherit;
}

.salvatore-section p {
    margin: 0;
    line-height: 1.7;
    font-weight: 400;
    letter-spacing: 0.01em;
    color: inherit;
}

/* ---------- Eyebrow ---------- */
.salvatore-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    font-family: var(--sv-font-body);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--sv-gold);
}

.salvatore-eyebrow::before {
    content: '';
    width: 36px;
    height: 1px;
    background: var(--sv-gold);
    opacity: 0.7;
}

/* ---------- Pill / eyebrow — hero-style across the whole brand ----------
   Same visual language as .sv-hero__pill: a small caffè glass glyph +
   Pacifico cursive text, no background. Used as section
   eyebrows in every Salvatore widget. */

.salvatore-pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    color: var(--sv-brown);
    font-family: 'Pacifico', var(--sv-font-script), cursive;
    font-style: normal;
    font-weight: 400;
    font-size: 20px;
    line-height: 1;
    letter-spacing: 0.005em;
    text-transform: none;
    white-space: nowrap;
}

/* Espresso-cup icon — encoded as data URI so existing markup
   (<span class="salvatore-pill">…</span>) keeps working without changes. */
.salvatore-pill::before {
    content: '';
    flex-shrink: 0;
    width: 26px;
    height: 30px;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 40' fill='none'><path d='M14 6C16 4 13 2 15 0' stroke='%23b78a3c' stroke-width='1' stroke-linecap='round' opacity='0.7'/><path d='M22 6C24 4 21 2 23 0' stroke='%23b78a3c' stroke-width='1' stroke-linecap='round' opacity='0.7'/><path d='M10 14L26 14C26 14 25 26 22 27L14 27C11 26 10 14 10 14Z' stroke='%23b78a3c' stroke-width='1.4' stroke-linejoin='round'/><path d='M26 16C31 16 31 24 25.5 24' stroke='%23b78a3c' stroke-width='1.4' stroke-linecap='round'/><ellipse cx='18' cy='15.4' rx='7' ry='1.6' fill='%23b78a3c' opacity='0.25'/><ellipse cx='18' cy='31' rx='12' ry='2.2' stroke='%23b78a3c' stroke-width='1.4' fill='none'/></svg>");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* Dark-section variant — same shape, gold-soft tones for contrast */
.salvatore-pill--dark {
    background: transparent;
    color: var(--sv-gold-soft);
}

.salvatore-pill--dark::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 40' fill='none'><path d='M14 6C16 4 13 2 15 0' stroke='%23d8b87a' stroke-width='1' stroke-linecap='round' opacity='0.7'/><path d='M22 6C24 4 21 2 23 0' stroke='%23d8b87a' stroke-width='1' stroke-linecap='round' opacity='0.7'/><path d='M10 14L26 14C26 14 25 26 22 27L14 27C11 26 10 14 10 14Z' stroke='%23d8b87a' stroke-width='1.4' stroke-linejoin='round'/><path d='M26 16C31 16 31 24 25.5 24' stroke='%23d8b87a' stroke-width='1.4' stroke-linecap='round'/><ellipse cx='18' cy='15.4' rx='7' ry='1.6' fill='%23d8b87a' opacity='0.25'/><ellipse cx='18' cy='31' rx='12' ry='2.2' stroke='%23d8b87a' stroke-width='1.4' fill='none'/></svg>");
}

/* ---------- Buttons ---------- */
.salvatore-btn {
    --btn-fg: var(--sv-text);
    --btn-bg: transparent;
    --btn-border: var(--sv-text);

    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 18px 36px 18px 28px;
    font-family: var(--sv-font-body);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--btn-fg);
    background: var(--btn-bg);
    border: 1px solid var(--btn-border);
    border-radius: 999px;
    cursor: pointer;
    overflow: hidden;
    transition: color .55s var(--sv-ease), border-color .55s var(--sv-ease);
}

.salvatore-btn::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--sv-text);
    transform: translateY(101%);
    transition: transform .55s var(--sv-ease);
    z-index: 0;
    border-radius: inherit;
}

.salvatore-btn > * {
    position: relative;
    z-index: 1;
}

.salvatore-btn:hover {
    color: var(--sv-paper);
    border-color: var(--sv-text);
}

.salvatore-btn:hover::after {
    transform: translateY(0);
}

/* Solid filled variant */
.salvatore-btn--filled {
    background: var(--sv-text);
    color: var(--sv-paper);
    border-color: var(--sv-text);
}

.salvatore-btn--filled::after {
    background: var(--sv-gold);
}

.salvatore-btn--filled:hover {
    color: var(--sv-text);
    border-color: var(--sv-gold);
}

/* Gold variant — for dark sections */
.salvatore-btn--gold {
    --btn-border: var(--sv-gold);
    color: var(--sv-bone);
}

.salvatore-btn--gold::after {
    background: var(--sv-gold);
}

.salvatore-btn--gold:hover {
    color: var(--sv-black);
}

.salvatore-btn .salvatore-btn__arrow {
    display: inline-block;
    width: 18px;
    height: 1px;
    background: currentColor;
    position: relative;
    transition: transform .55s var(--sv-ease);
}

.salvatore-btn .salvatore-btn__arrow::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    width: 8px;
    height: 8px;
    border-top: 1px solid currentColor;
    border-right: 1px solid currentColor;
    transform: translateY(-50%) rotate(45deg);
}

.salvatore-btn:hover .salvatore-btn__arrow {
    transform: translateX(4px);
}

/* ---------- Reveal helpers ---------- */
.sv-reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 1.1s var(--sv-ease), transform 1.1s var(--sv-ease);
    will-change: transform, opacity;
}

.sv-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.sv-reveal--left  { transform: translateX(-40px); }
.sv-reveal--right { transform: translateX(40px); }
.sv-reveal--left.is-visible,
.sv-reveal--right.is-visible {
    transform: translateX(0);
}

@media (prefers-reduced-motion: reduce) {
    .sv-reveal,
    .sv-reveal--left,
    .sv-reveal--right {
        opacity: 1;
        transform: none;
        transition: none;
    }
}