/* ==========================================================================
   FEWSET — System Primitives (Standardization Phase 1)
   --------------------------------------------------------------------------
   Opt-in utility classes that consume the design tokens in style.css :root
   (--h1..--h6, --text-*, --section-y, --container-*, --product-gap,
   --glass-dark-*). Loaded right after the token stylesheet so component CSS
   can still override where a section genuinely needs to.

   NOTHING here is applied automatically — a section adopts a primitive by
   ADDING a class (never by renaming/removing an existing one), which is why
   introducing this file changes no current rendering and cannot conflict
   with any section's JS (JS binds to the existing classes / data-attributes,
   all of which stay exactly as they are).

   Phase 2 = point each section's header/spacing at these, one file at a time.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. SECTION SHELL — standard vertical rhythm
   Full-bleed background is fine; padding controls the rhythm. Pair with
   .fewset-container for the inner content width.
   -------------------------------------------------------------------------- */
.fewset-section            { padding-top: var(--section-y); padding-bottom: var(--section-y); }
.fewset-section--feature   { padding-top: var(--section-y-feature); padding-bottom: var(--section-y-feature); }
.fewset-section--flush-top    { padding-top: 0; }
.fewset-section--flush-bottom { padding-bottom: 0; }


/* --------------------------------------------------------------------------
   2. CONTAINER — one max-width + one gutter for every section
   -------------------------------------------------------------------------- */
.fewset-container {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--container-gutter);
}
.fewset-container--wide { max-width: none; }   /* full-bleed content, gutters kept */


/* --------------------------------------------------------------------------
   3. SECTION HEADER BLOCK — eyebrow -> title -> (optional) intro
   -------------------------------------------------------------------------- */
.fewset-section-head            { margin-bottom: var(--section-gap); }
.fewset-section-head--center    { text-align: center; }
.fewset-section-head--center .fewset-section-intro { margin-inline: auto; }

.fewset-eyebrow {
    font-family: var(--font-primary);
    font-size: var(--text-xs);
    font-weight: 500;
    letter-spacing: var(--eyebrow-tracking);
    text-transform: uppercase;
    color: var(--on-surface-variant);
    margin: 0 0 0.9rem;
}

.fewset-section-intro {
    font-family: var(--font-primary);
    font-size: var(--text-base);
    line-height: 1.7;
    color: var(--on-surface-variant);
    max-width: 56ch;
    margin: 0.75rem 0 0;
}


/* --------------------------------------------------------------------------
   4. HEADING LADDER (Outfit) — semantic, opt-in.
   .fewset-section-title is the canonical H2 used for every section heading.
   -------------------------------------------------------------------------- */
.fewset-h1, .fewset-h2, .fewset-h3, .fewset-h4, .fewset-h5, .fewset-h6,
.fewset-section-title {
    font-family: var(--font-heading);
    color: var(--on-surface);
    margin: 0;
}
.fewset-h1 { font-size: var(--h1); font-weight: 700; letter-spacing: -0.02em;  line-height: 1.05; }
.fewset-h2,
.fewset-section-title { font-size: var(--h2); font-weight: 400; letter-spacing: -0.02em; line-height: 1.08; }
.fewset-h3 { font-size: var(--h3); font-weight: 500; letter-spacing: -0.015em; line-height: 1.2; }
.fewset-h4 { font-size: var(--h4); font-weight: 500; letter-spacing: -0.01em;  line-height: 1.3; }
.fewset-h5 { font-size: var(--h5); font-weight: 600; letter-spacing: 0;        line-height: 1.4; }
.fewset-h6 { font-size: var(--h6); font-weight: 600; letter-spacing: 0.12em;   line-height: 1.4; text-transform: uppercase; }


/* --------------------------------------------------------------------------
   5. TEXT SCALE — body copy
   -------------------------------------------------------------------------- */
.fewset-text-lg { font-size: var(--text-lg);   line-height: 1.6; }
.fewset-text    { font-size: var(--text-base); line-height: 1.6; }
.fewset-text-sm { font-size: var(--text-sm);   line-height: 1.6; }
.fewset-text-xs { font-size: var(--text-xs);   line-height: 1.5; }
.fewset-text-muted { color: var(--on-surface-variant); }


/* --------------------------------------------------------------------------
   6. PRODUCT SPACING
   Product / card spacing already lives in css/product-loop.css :root
   (--fewset-loop-gap, --fewset-rail-gap, --fewset-card-meta-top, --fewset-card-price-gap,
   …) and is applied there. It is NOT re-implemented here — this single helper
   just maps a generic grid to that existing token so any NEW product grid
   stays in step with the shop + rails. (Phase 2 merges that token block into
   style.css :root for one home.)
   -------------------------------------------------------------------------- */
.fewset-product-grid { gap: var(--fewset-loop-gap, 5px); }


/* --------------------------------------------------------------------------
   7. GLASS ICON — one frosted-glass recipe for the heart, the "+", etc.
   Size/position belong to the host (the icon button); this only sets the
   plate so every glass control matches.
   -------------------------------------------------------------------------- */
.fewset-glass-icon {
    background: var(--glass-dark-bg);
    -webkit-backdrop-filter: var(--glass-dark-blur);
    backdrop-filter: var(--glass-dark-blur);
    border: 1px solid var(--glass-hairline);
    border-radius: 50%;
    color: #fff;
    transition: background .16s ease;
}
.fewset-glass-icon:hover { background: var(--glass-dark-bg-hover); }
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .fewset-glass-icon { background: rgba(20, 20, 20, 0.62); }
}