/**
 * Storefront design tokens — public site (shop, home, auth, checkout, etc.)
 * Dashboards load separately; admin/vendor can adopt these vars later.
 */
:root {
    --sh-ink: #0f1210;
    --sh-ink-2: #252b28;
    --sh-muted: #5c6560;
    --sh-muted-2: #8a928c;
    --sh-surface: #f3f1ec;
    --sh-surface-2: #e8e5de;
    --sh-card: #ffffff;
    --sh-accent: #1f6b5c;
    --sh-accent-mid: #2a8f7c;
    --sh-accent-deep: #164a41;
    --sh-accent-soft: rgba(31, 107, 92, 0.12);
    --sh-accent-glow: rgba(42, 143, 124, 0.35);
    --sh-highlight: #c9a227;
    --sh-topbar: #0c100e;
    --sh-topbar-2: #152220;
    --sh-hero-scrim: rgba(8, 14, 12, 0.78);
    --sh-radius-sm: 8px;
    --sh-radius-md: 12px;
    --sh-radius-lg: 18px;
    --sh-radius-xl: 24px;
    --sh-shadow-sm: 0 1px 2px rgba(15, 18, 16, 0.05);
    --sh-shadow-md: 0 16px 48px rgba(15, 18, 16, 0.08);
    --sh-shadow-lg: 0 28px 80px rgba(15, 18, 16, 0.12);
    --shell-max: 1300px;
    --shell-pad: 24px;
    --content-max: 1280px;
    --section-y: clamp(3rem, 8vw, 5.5rem);
    --radius-shell: 20px;
    --font-sans: "Poppins", sans-serif;
    --font-display: "Poppins", sans-serif;

    /* Legacy names used across older CSS */
    --primary-color: var(--sh-accent);
    --secondary-color: var(--sh-muted);
    --success-color: #2a7d3e;
    --danger-color: #b8322a;
    --warning-color: #c49a1a;
    --info-color: var(--sh-accent-mid);
    --light-color: var(--sh-surface);
    --dark-color: var(--sh-ink);
    --white: #ffffff;
    --body-bg: var(--sh-surface);
    --text-color: var(--sh-ink-2);
    --border-color: rgba(15, 18, 16, 0.1);
    --shadow: var(--sh-shadow-sm);
    --transition: 0.25s ease;

    /* Product page legacy aliases */
    --dark-text: var(--sh-ink-2);
    --medium-text: var(--sh-muted);
    --light-text: var(--sh-muted-2);
    --light-bg: var(--sh-surface);
    --accent-color: var(--sh-highlight);
}

body,
button,
input,
select,
textarea {
    font-family: var(--font-sans);
}

body {
    color: var(--text-color);
    background-color: var(--body-bg);
}

/* Readable headings — Poppins, balanced line-height & spacing */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--sh-ink);
    text-wrap: balance;
}

h1 {
    font-size: clamp(2.25rem, 4.2vw, 3.5rem);
    line-height: 1.15;
    letter-spacing: -0.02em;
}

/* Dark hero sections: parent sets color #fff — do not force --sh-ink on headings */
.about-hero-content h1,
.about-hero-content p,
.terms-hero h1,
.terms-hero p,
.home-hero__copy h1,
.home-hero__copy p,
.shop-hero-title,
.shop-hero-inner p {
    color: inherit;
}

h2 {
    font-size: clamp(1.75rem, 3vw, 2.35rem);
    line-height: 1.22;
    letter-spacing: -0.015em;
}

h3 {
    font-size: clamp(1.2rem, 2vw, 1.45rem);
    line-height: 1.28;
    letter-spacing: -0.01em;
}

p {
    line-height: 1.65;
}
