/* ═══════════════════════════════════════════════════════════════════════════
   She Thinks, He Inks — theme.css
   Brand design tokens + base + chrome foundations.

   Standalone TitanCart storefront theme. Single skin (fixed light/cream — no dark mode).
   Every color, radius, and the 1440 container flow from the --sthi-* tokens in
   :root below; component CSS must reference tokens, never raw hex. Token
   reference: docs/DESIGN-SYSTEM.md. Built on top of Bootstrap 5.3.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════
   DESIGN TOKENS  (fixed light skin)
   ═══════════════════════════════════════════════════════════════════════════ */
:root {

    /* ── Typography ──────────────────────────────────────────────────────── */
    --sthi-font:         'Nunito', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --sthi-font-heading: 'Nunito', system-ui, -apple-system, sans-serif;
    --sthi-font-script:  'Caveat', 'Segoe Script', 'Comic Sans MS', cursive;

    /* ── Brand ───────────────────────────────────────────────────────────── */
    --sthi-brand:        #E04B6E;   /* raspberry pink — "She Thinks", primary CTA */
    --sthi-brand-hover:  #C73E5F;
    --sthi-brand-soft:   #FCE7EC;
    --sthi-navy:         #1F3A5C;   /* ink navy — "He Inks", secondary CTA, headings */
    --sthi-navy-hover:   #16304D;
    --sthi-teal:         #34A29B;   /* accent — newsletter, icons */
    --sthi-teal-hover:   #2B847E;
    --sthi-gold:         #F2B33D;   /* accent — steps, stars, highlights */

    /* ── Surfaces ────────────────────────────────────────────────────────── */
    --sthi-bg:           #FBF4E7;   /* cream page ground */
    --sthi-bg-secondary: #F6ECDA;   /* deeper cream — alternating sections */
    --sthi-bg-tertiary:  #FFFDF8;   /* card surface */
    --sthi-bg-elevated:  #FFFDF8;
    --sthi-bg-inverse:   #1F3A5C;
    --sthi-bg-overlay:   rgba(31, 58, 92, 0.55);

    /* ── Text ────────────────────────────────────────────────────────────── */
    --sthi-text:            #33302B;   /* warm charcoal body */
    --sthi-text-secondary:  #6B655C;
    --sthi-text-tertiary:   #A89F92;
    --sthi-text-on-brand:   #ffffff;
    --sthi-text-on-inverse: #FBF4E7;
    --sthi-heading:         #1F3A5C;   /* headings default to navy */

    /* ── Borders ─────────────────────────────────────────────────────────── */
    --sthi-border:        #E8DDC8;   /* warm tan hairline */
    --sthi-border-strong: #D9CBB0;
    --sthi-border-subtle: #F0E8D8;

    /* ── Semantic ────────────────────────────────────────────────────────── */
    --sthi-success: #2E9E7E;  --sthi-success-bg: #E3F5EE;  --sthi-success-text: #1C6B55;
    --sthi-warning: #E0962F;  --sthi-warning-bg: #FBEEDA;  --sthi-warning-text: #946018;
    --sthi-error:   #D9534F;  --sthi-error-bg:   #FBE7E6;  --sthi-error-text:   #9C322F;
    --sthi-info:    #3E7CB1;  --sthi-info-bg:    #E7F0F7;  --sthi-info-text:    #2A5A85;

    /* ── Effects (warm-tinted shadows + brand glow) ──────────────────────── */
    --sthi-shadow-sm:         0 1px 3px rgba(95,70,40,.06), 0 1px 2px rgba(95,70,40,.04);
    --sthi-shadow:            0 6px 20px rgba(95,70,40,.10);
    --sthi-shadow-lg:         0 20px 50px rgba(95,70,40,.16);
    --sthi-shadow-card-hover: 0 12px 28px rgba(95,70,40,.14);
    --sthi-glow:              0 10px 25px color-mix(in srgb, var(--sthi-brand) 32%, transparent);
    --sthi-glow-hover:        0 14px 32px color-mix(in srgb, var(--sthi-brand) 42%, transparent);

    /* ── Geometry (rounded, friendly) ────────────────────────────────────── */
    --sthi-radius-sm:   8px;
    --sthi-radius:      14px;
    --sthi-radius-lg:   20px;
    --sthi-radius-xl:   28px;
    --sthi-radius-pill: 50rem;

    /* ── Layout ──────────────────────────────────────────────────────────── */
    --sthi-container-max: 1440px;
    --sthi-gutter:        clamp(16px, 4vw, 48px);
    --sthi-section-pad:   clamp(48px, 7vw, 96px);

    /* ── Motion ──────────────────────────────────────────────────────────── */
    --sthi-transition:      .2s ease;
    --sthi-transition-fast: .15s ease;

    /* ── Bootstrap bridge — map our brand onto Bootstrap variables ───────── */
    --bs-primary:          #E04B6E;
    --bs-primary-rgb:      224, 75, 110;
    --bs-body-bg:          var(--sthi-bg);
    --bs-body-color:       var(--sthi-text);
    --bs-body-font-family: var(--sthi-font);
    --bs-link-color:       var(--sthi-brand);
    --bs-link-hover-color: var(--sthi-brand-hover);
    --bs-border-color:     var(--sthi-border);
}


/* ═══════════════════════════════════════════════════════════════════════════
   BASE
   ═══════════════════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: var(--sthi-font);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.65;
    color: var(--sthi-text);
    background-color: var(--sthi-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; height: auto; }

a {
    color: var(--sthi-brand);
    text-decoration: none;
    transition: color var(--sthi-transition-fast);
}
a:hover { color: var(--sthi-brand-hover); }

::selection { background: var(--sthi-brand-soft); color: var(--sthi-navy); }

:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--sthi-brand) 55%, transparent);
    outline-offset: 2px;
}

hr { border: 0; border-top: 1px solid var(--sthi-border); opacity: 1; }


/* ═══════════════════════════════════════════════════════════════════════════
   LAYOUT — 1440 container
   Raise Bootstrap's 1320px ceiling to the brand's 1440 target.
   ═══════════════════════════════════════════════════════════════════════════ */

.container,
.container-xxl,
.container-xl,
.container-lg {
    width: 100%;
    margin-inline: auto;
    padding-inline: var(--sthi-gutter);
}

@media (min-width: 1400px) {
    .container,
    .container-xxl { max-width: var(--sthi-container-max); }
}

/* Brand section helper: full-bleed band + centered 1440 inner. */
.sthi-section { padding-block: var(--sthi-section-pad); }
.sthi-section--cream  { background: var(--sthi-bg); }
.sthi-section--cream2 { background: var(--sthi-bg-secondary); }
.sthi-section--ink    { background: var(--sthi-bg-inverse); color: var(--sthi-text-on-inverse); }


/* ═══════════════════════════════════════════════════════════════════════════
   TYPOGRAPHY
   ═══════════════════════════════════════════════════════════════════════════ */

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--sthi-font-heading);
    font-weight: 800;
    line-height: 1.15;
    color: var(--sthi-heading);
    margin: 0 0 .5em;
}

h1, .h1 { font-size: clamp(2rem, 4.5vw, 3.25rem); font-weight: 900; letter-spacing: -.01em; }
h2, .h2 { font-size: clamp(1.6rem, 3.2vw, 2.5rem); }
h3, .h3 { font-size: clamp(1.3rem, 2.2vw, 1.75rem); }
h4, .h4 { font-size: 1.25rem; }
h5, .h5 { font-size: 1.05rem; }
h6, .h6 { font-size: .9rem; text-transform: uppercase; letter-spacing: .06em; }

p { margin: 0 0 1rem; }
.lead { font-size: 1.15rem; color: var(--sthi-text-secondary); }
.text-muted { color: var(--sthi-text-secondary) !important; }
small, .small { font-size: .85em; }
strong, b { font-weight: 700; }

/* Brush-script accent — eyebrows + decorative section titles. */
.sthi-script {
    font-family: var(--sthi-font-script);
    font-weight: 700;
    line-height: 1;
}
.sthi-eyebrow {
    font-family: var(--sthi-font-script);
    font-weight: 700;
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    color: var(--sthi-navy);
}
.sthi-eyebrow--pink { color: var(--sthi-brand); }
.sthi-eyebrow--teal { color: var(--sthi-teal); }

/* Section heading block: little flanking marks + centered script title. */
.sthi-section-head { text-align: center; margin-bottom: clamp(28px, 4vw, 56px); }
.sthi-section-head .sthi-eyebrow { display: inline-flex; align-items: center; gap: .6rem; }
.sthi-section-head .sthi-eyebrow::before,
.sthi-section-head .sthi-eyebrow::after {
    content: ""; width: 26px; height: 2px; border-radius: 2px;
    background: currentColor; opacity: .55;
}
.sthi-section-head p { margin-top: .35rem; color: var(--sthi-text-secondary); }

/* Color utilities (brand) */
.sthi-text-brand { color: var(--sthi-brand) !important; }
.sthi-text-navy  { color: var(--sthi-navy)  !important; }
.sthi-text-teal  { color: var(--sthi-teal)  !important; }
.sthi-text-gold  { color: var(--sthi-gold)  !important; }
.sthi-bg-soft    { background: var(--sthi-brand-soft) !important; }


/* ═══════════════════════════════════════════════════════════════════════════
   BUTTONS  (pill-friendly brand variants; layered on Bootstrap .btn)
   ═══════════════════════════════════════════════════════════════════════════ */

.btn {
    --bs-btn-font-family: var(--sthi-font);
    font-weight: 700;
    border-radius: var(--sthi-radius-pill);
    padding: .7rem 1.5rem;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    transition: transform var(--sthi-transition-fast), box-shadow var(--sthi-transition-fast), background-color var(--sthi-transition-fast);
}
.btn:active { transform: translateY(1px); }

/* Primary pink (the plugin's storefront button gets aliased to this in shop.css) */
.btn-brand,
.btn-primary {
    background: var(--sthi-brand);
    border: 2px solid var(--sthi-brand);
    color: var(--sthi-text-on-brand);
    box-shadow: var(--sthi-glow);
}
.btn-brand:hover,
.btn-primary:hover {
    background: var(--sthi-brand-hover);
    border-color: var(--sthi-brand-hover);
    color: #fff;
    box-shadow: var(--sthi-glow-hover);
    transform: translateY(-1px);
}

/* Secondary navy ("ink") */
.btn-ink {
    background: var(--sthi-navy);
    border: 2px solid var(--sthi-navy);
    color: #fff;
}
.btn-ink:hover {
    background: var(--sthi-navy-hover);
    border-color: var(--sthi-navy-hover);
    color: #fff;
    transform: translateY(-1px);
}

/* Teal */
.btn-teal {
    background: var(--sthi-teal);
    border: 2px solid var(--sthi-teal);
    color: #fff;
}
.btn-teal:hover { background: var(--sthi-teal-hover); border-color: var(--sthi-teal-hover); color: #fff; }

/* Outline (brand) */
.btn-outline-brand {
    background: transparent;
    border: 2px solid var(--sthi-brand);
    color: var(--sthi-brand);
}
.btn-outline-brand:hover { background: var(--sthi-brand); color: #fff; }

.btn-lg { padding: .9rem 2rem; font-size: 1.05rem; }


/* ═══════════════════════════════════════════════════════════════════════════
   CHROME FOUNDATIONS
   ═══════════════════════════════════════════════════════════════════════════ */

/* Announcement bar — full-bleed pink band above the header (markup lands S2). */
.sthi-announce {
    background: var(--sthi-brand);
    color: var(--sthi-text-on-brand);
    font-size: .9rem;
    font-weight: 600;
}
.sthi-announce a { color: #fff; text-decoration: underline; }
.sthi-announce__inner {
    display: flex; align-items: center; justify-content: center;
    gap: 2rem; flex-wrap: wrap;
    padding: .55rem var(--sthi-gutter);
    text-align: center;
}

/* Cards — shared surface for category/product/testimonial cards. */
.sthi-card {
    background: var(--sthi-bg-tertiary);
    border: 1px solid var(--sthi-border);
    border-radius: var(--sthi-radius-lg);
    box-shadow: var(--sthi-shadow-sm);
    overflow: hidden;
    transition: transform var(--sthi-transition), box-shadow var(--sthi-transition);
}
.sthi-card:hover { transform: translateY(-4px); box-shadow: var(--sthi-shadow-card-hover); }

/* Badges (New / Bestseller / Digital). */
.sthi-badge {
    display: inline-block;
    font-size: .72rem; font-weight: 800; letter-spacing: .02em;
    padding: .25rem .6rem; border-radius: var(--sthi-radius-pill);
    color: #fff; background: var(--sthi-brand);
}
.sthi-badge--new     { background: var(--sthi-teal); }
.sthi-badge--best    { background: var(--sthi-brand); }
.sthi-badge--digital { background: var(--sthi-navy); }

/* Price */
.sthi-price { font-weight: 700; color: var(--sthi-brand); }

/* Star rating */
.sthi-stars { color: var(--sthi-gold); letter-spacing: 1px; }


/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE BASE TWEAKS
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 575.98px) {
    .sthi-announce__inner { gap: .25rem 1rem; }
    .btn { padding: .65rem 1.2rem; }
}

@media (prefers-reduced-motion: reduce) {
    * { scroll-behavior: auto !important; }
    .btn, .sthi-card { transition: none !important; }
}

/* ── S2+ appends: header / footer / home section styles → home.css ──────────── */
/* ── S3 appends: TitanCart shop/product/cart skin → shop.css ────────────────── */