/* stylelint-disable media-feature-name-disallowed-list, media-feature-range-notation -- Phase 9: max-width media queries retained; mobile-first conversion deferred (D-08). Strict-value/!important/order cleaned; rules layered-where-safe (D9-06). */

/**
 * Typography System - Rhuarc's Pet Supplies
 *
 * Font Stack:
 * - Display: Filson Pro (local WOFF2) - used for headings via --font-display token (css/design-tokens.css:162)
 * - Body: DM Sans (Google Fonts) - clean, friendly sans-serif, loaded deferred via media=print swap, used via --font-body token
 *
 * CASCADE-LAYER DISPOSITION (D9-06, per-rule layer-where-safe):
 * fonts.css declares `array('rhuarcs-style')` as a wp_enqueue dependency, so it
 * loads AFTER style.css (verified: live front-page render). The real layer-safety
 * discriminator is therefore PER-RULE unlayered-competitor presence, NOT per-sheet
 * load order. Rules with no unlayered competitor are wrapped in the correct @layer;
 * rules that still face an unlayered competitor are kept UNLAYERED with a scoped
 * reason (moving them into a layer regresses the cascade) and reconcile in the
 * atomic Plan 09-09 (style.css/critical.css co-layer).
 *
 * KNOWN UNLAYERED SURVIVORS (entangled — reconcile in 09-09):
 *   - .hero-title / .hero-subtitle / .section-title (+ --light, + mobile overrides)
 *     compete with UNLAYERED critical.css on the front page. Layering here lets the
 *     unlayered critical.css rule win → hero/section text shrinks. (Also overlaps the
 *     front-page-vs-inner reconcile in Plan 09-10.)
 *   - .font-display* / .font-body* / .font-accent* / .font-primary* / .font-secondary*
 *     font-family !important utilities are load-bearing against style.css's still-
 *     unlayered `font-family ... !important` enforcement (finishes layering in 09-09).
 *   - .h1–.h6 metrics compete with style.css's unlayered .h1–.h6 font-family
 *     enforcement + metrics block.
 *   - .lead / .small / .text-muted compete with style.css (unlayered).
 *   - .text-{size} / .leading-* / .tracking-* / .text-{align} duplicate UNLAYERED
 *     utilities.css helpers (utilities.css is the after-loading pair, layered in 09).
 *
 * @package RhuarcsPetSupplies
 * @since 2.1.0
 */

/* ==========================================================================
   FILSON PRO FONT DECLARATIONS (Local - Display Font, via --font-display)
   @font-face stays at file scope — never inside a layer.
   ========================================================================== */

@font-face {
    font-family: 'Filson Pro';
    src: url('../fonts/FilsonPro-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Filson Pro';
    src: url('../fonts/FilsonPro-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Filson Pro';
    src: url('../fonts/FilsonPro-Bold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Filson Pro';
    src: url('../fonts/FilsonPro-Heavy.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Filson Pro';
    src: url('../fonts/FilsonPro-Light.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Filson Pro';
    src: url('../fonts/FilsonPro-RegularItalic.woff2') format('woff2');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

/* ==========================================================================
   BASE TYPOGRAPHY STYLES
   ========================================================================== */

/* Body element typography defaults consolidated into css/base.css @layer base
   (FOUND-02, CD-1). text-rendering / font-feature-settings / font-kerning are
   browser defaults that base.css does not need to redeclare — modern browsers
   apply optimizeLegibility and kerning by default for body text. */

/* ==========================================================================
   HEADING UTILITY CLASSES — UNLAYERED SURVIVOR
   ==========================================================================
   Opt-in heading styling on non-heading elements (e.g. <p class="h2">).
   Element-level defaults for <h1>..<h6> live in css/base.css under @layer base
   (FOUND-02, CD-1). These .h1–.h6 utilities compete with style.css's UNLAYERED
   .h1–.h6 font-family enforcement + metrics block (style.css loads before; fonts
   wins now by source order). Moving them into a layer lets unlayered style.css
   win → metrics change. Kept UNLAYERED — reconciles in atomic Plan 09-09.
   ========================================================================== */

.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--font-display);
    font-weight: var(--font-semibold);
    line-height: var(--leading-tight);
    color: var(--text-primary);
    margin-top: 0;
    margin-bottom: var(--space-4);
}

.h1 {
    /* stylelint-disable-next-line scale-unlimited/declaration-strict-value -- fluid clamp() with token ceiling; no byte-exact token for the floor/preferred (D9-05) */
    font-size: clamp(2.25rem, 5vw, var(--text-5xl));
    font-weight: var(--font-bold);
    letter-spacing: var(--tracking-tight);
}

.h2 {
    /* stylelint-disable-next-line scale-unlimited/declaration-strict-value -- fluid clamp() with token ceiling; no byte-exact token for the floor/preferred (D9-05) */
    font-size: clamp(1.75rem, 4vw, var(--text-4xl));
    font-weight: var(--font-semibold);
}

.h3 {
    /* stylelint-disable-next-line scale-unlimited/declaration-strict-value -- fluid clamp() with token ceiling; no byte-exact token for the floor/preferred (D9-05) */
    font-size: clamp(1.5rem, 3vw, var(--text-3xl));
    font-weight: var(--font-semibold);
}

.h4 {
    font-size: var(--text-2xl);
    font-weight: var(--font-medium);
}

.h5 {
    font-size: var(--text-xl);
    font-weight: var(--font-medium);
}

.h6 {
    font-size: var(--text-lg);
    font-weight: var(--font-medium);
}

/* ==========================================================================
   HERO & DISPLAY TEXT — UNLAYERED SURVIVOR
   ==========================================================================
   .hero-title / .hero-subtitle / .section-title compete with UNLAYERED
   critical.css on the front page (critical.css is inlined; layering these lets
   it win → hero/section text shrinks). Kept UNLAYERED — reconciles in atomic
   Plan 09-09 (whose scope adds critical.css + fonts.css for these rules) and
   overlaps the front-page-vs-inner reconcile in Plan 09-10.
   ========================================================================== */

.hero-title {
    font-family: var(--font-display);
    /* stylelint-disable-next-line scale-unlimited/declaration-strict-value -- fluid clamp() with token ceiling; no byte-exact token for the floor/preferred (D9-05) */
    font-size: clamp(2.5rem, 6vw, var(--text-6xl));
    font-weight: var(--font-bold);
    line-height: 1.1;
    letter-spacing: var(--tracking-tight);
    color: var(--text-primary);
}

.hero-title--light {
    color: var(--text-on-purple);
}

.hero-subtitle {
    font-family: var(--font-body);
    /* stylelint-disable-next-line scale-unlimited/declaration-strict-value -- fluid clamp() with token ceiling; no byte-exact token for the floor/preferred (D9-05) */
    font-size: clamp(1rem, 2.5vw, var(--text-xl));
    font-weight: var(--font-normal);
    line-height: var(--leading-relaxed);
    color: var(--text-secondary);
}

.hero-subtitle--light {
    /* stylelint-disable-next-line scale-unlimited/declaration-strict-value -- bespoke translucent white; no byte-exact design token (D9-05) */
    color: rgb(255 255 255 / 90%);
}

.section-title {
    font-family: var(--font-display);
    /* stylelint-disable-next-line scale-unlimited/declaration-strict-value -- fluid clamp() with token ceiling; no byte-exact token for the floor/preferred (D9-05) */
    font-size: clamp(1.75rem, 4vw, var(--text-4xl));
    font-weight: var(--font-semibold);
    line-height: var(--leading-tight);
    color: var(--text-primary);
    margin-bottom: var(--space-4);
}

.section-title--light {
    color: var(--text-on-purple);
}

/* ==========================================================================
   SECTION SUBTITLE — @layer components (no unlayered competitor)
   ========================================================================== */

@layer components {
    .section-subtitle {
        max-width: 600px;
        font-family: var(--font-body);
        font-size: var(--text-lg);
        color: var(--text-secondary);
    }

    .section-subtitle--light {
        /* stylelint-disable-next-line scale-unlimited/declaration-strict-value -- bespoke translucent white; no byte-exact design token (D9-05) */
        color: rgb(255 255 255 / 85%);
    }
}

/* ==========================================================================
   BODY TEXT STYLES
   ==========================================================================
   p / a / a:hover are element defaults → @layer base (base.css owns these in
   @layer base; fonts.css loads after → still wins at equal specificity within
   the layer; zero-diff). .lead / .small / .text-muted face UNLAYERED style.css
   / utilities.css competitors → kept UNLAYERED (reconcile in 09-09).
   ========================================================================== */

@layer base {
    p {
        margin-top: 0;
        margin-bottom: var(--space-4);
    }

    a {
        color: var(--purple-700);
        text-decoration: none;
        transition: color var(--transition-fast);
    }

    a:hover {
        color: var(--purple-600);
        text-decoration: underline;
    }
}

.lead {
    font-size: var(--text-xl);
    font-weight: var(--font-normal);
    line-height: var(--leading-relaxed);
    color: var(--text-secondary);
}

.small, small {
    font-size: var(--text-sm);
}

.text-muted {
    color: var(--text-muted);
}

/* ==========================================================================
   DISPLAY / BODY / ACCENT FONT UTILITIES — UNLAYERED SURVIVOR
   ==========================================================================
   The font-family !important utilities are load-bearing against style.css's
   still-unlayered `font-family ... !important` enforcement. A layered !important
   loses to an unlayered !important, so layering these here would let style.css
   enforcement override the opt-in font choice. Kept UNLAYERED with scoped
   declaration-no-important disables — reconciles in atomic Plan 09-09.
   ========================================================================== */

.font-display {
    /* stylelint-disable-next-line declaration-no-important -- load-bearing override of style.css's unlayered font-family enforcement; reconciles in Plan 09-09 */
    font-family: var(--font-display) !important;
}

.font-display-light {
    /* stylelint-disable-next-line declaration-no-important -- load-bearing override of style.css's unlayered font-family enforcement; reconciles in Plan 09-09 */
    font-family: var(--font-display) !important;
    font-weight: var(--font-light);
}

.font-display-regular {
    /* stylelint-disable-next-line declaration-no-important -- load-bearing override of style.css's unlayered font-family enforcement; reconciles in Plan 09-09 */
    font-family: var(--font-display) !important;
    font-weight: var(--font-normal);
}

.font-display-medium {
    /* stylelint-disable-next-line declaration-no-important -- load-bearing override of style.css's unlayered font-family enforcement; reconciles in Plan 09-09 */
    font-family: var(--font-display) !important;
    font-weight: var(--font-medium);
}

.font-display-semibold {
    /* stylelint-disable-next-line declaration-no-important -- load-bearing override of style.css's unlayered font-family enforcement; reconciles in Plan 09-09 */
    font-family: var(--font-display) !important;
    font-weight: var(--font-semibold);
}

.font-display-bold {
    /* stylelint-disable-next-line declaration-no-important -- load-bearing override of style.css's unlayered font-family enforcement; reconciles in Plan 09-09 */
    font-family: var(--font-display) !important;
    font-weight: var(--font-bold);
}

.font-body {
    /* stylelint-disable-next-line declaration-no-important -- load-bearing override of style.css's unlayered font-family enforcement; reconciles in Plan 09-09 */
    font-family: var(--font-body) !important;
}

.font-body-light {
    /* stylelint-disable-next-line declaration-no-important -- load-bearing override of style.css's unlayered font-family enforcement; reconciles in Plan 09-09 */
    font-family: var(--font-body) !important;
    font-weight: var(--font-light);
}

.font-body-regular {
    /* stylelint-disable-next-line declaration-no-important -- load-bearing override of style.css's unlayered font-family enforcement; reconciles in Plan 09-09 */
    font-family: var(--font-body) !important;
    font-weight: var(--font-normal);
}

.font-body-medium {
    /* stylelint-disable-next-line declaration-no-important -- load-bearing override of style.css's unlayered font-family enforcement; reconciles in Plan 09-09 */
    font-family: var(--font-body) !important;
    font-weight: var(--font-medium);
}

.font-body-semibold {
    /* stylelint-disable-next-line declaration-no-important -- load-bearing override of style.css's unlayered font-family enforcement; reconciles in Plan 09-09 */
    font-family: var(--font-body) !important;
    font-weight: var(--font-semibold);
}

.font-body-bold {
    /* stylelint-disable-next-line declaration-no-important -- load-bearing override of style.css's unlayered font-family enforcement; reconciles in Plan 09-09 */
    font-family: var(--font-body) !important;
    font-weight: var(--font-bold);
}

.font-accent {
    /* stylelint-disable-next-line declaration-no-important -- load-bearing override of style.css's unlayered font-family enforcement; reconciles in Plan 09-09 */
    font-family: 'Filson Pro', var(--font-body) !important;
}

.font-accent-light {
    /* stylelint-disable-next-line declaration-no-important -- load-bearing override of style.css's unlayered font-family enforcement; reconciles in Plan 09-09 */
    font-family: 'Filson Pro', var(--font-body) !important;
    font-weight: 300;
}

.font-accent-regular {
    /* stylelint-disable-next-line declaration-no-important -- load-bearing override of style.css's unlayered font-family enforcement; reconciles in Plan 09-09 */
    font-family: 'Filson Pro', var(--font-body) !important;
    font-weight: 400;
}

.font-accent-medium {
    /* stylelint-disable-next-line declaration-no-important -- load-bearing override of style.css's unlayered font-family enforcement; reconciles in Plan 09-09 */
    font-family: 'Filson Pro', var(--font-body) !important;
    font-weight: 500;
}

.font-accent-bold {
    /* stylelint-disable-next-line declaration-no-important -- load-bearing override of style.css's unlayered font-family enforcement; reconciles in Plan 09-09 */
    font-family: 'Filson Pro', var(--font-body) !important;
    font-weight: 600;
}

/* Legacy class names for backwards compatibility */
/* stylelint-disable declaration-no-important -- legacy font-family utilities: load-bearing override of style.css's unlayered enforcement; reconciles in Plan 09-09 */
.font-primary {
    font-family: var(--font-body) !important;
}

.font-primary-light {
    font-family: var(--font-body) !important;
    font-weight: 300;
}

.font-primary-regular {
    font-family: var(--font-body) !important;
    font-weight: 400;
}

.font-primary-medium {
    font-family: var(--font-body) !important;
    font-weight: 500;
}

.font-primary-semibold {
    font-family: var(--font-body) !important;
    font-weight: 600;
}

.font-primary-bold {
    font-family: var(--font-body) !important;
    font-weight: 700;
}

.font-secondary {
    font-family: var(--font-display) !important;
}

.font-secondary-light {
    font-family: var(--font-display) !important;
    font-weight: 300;
}

.font-secondary-regular {
    font-family: var(--font-display) !important;
    font-weight: 400;
}

.font-secondary-medium {
    font-family: var(--font-display) !important;
    font-weight: 500;
}

.font-secondary-semibold {
    font-family: var(--font-display) !important;
    font-weight: 600;
}

.font-secondary-bold {
    font-family: var(--font-display) !important;
    font-weight: 700;
}
/* stylelint-enable declaration-no-important */

/* ==========================================================================
   FONT SIZE UTILITIES — UNLAYERED SURVIVOR
   ==========================================================================
   Duplicate the .text-{size} helpers in UNLAYERED utilities.css (the
   after-loading pair, layered in 09). Kept UNLAYERED to avoid the layered-loses-
   to-unlayered inversion — reconciles in atomic Plan 09-09.
   ========================================================================== */

.text-xs { font-size: var(--text-xs); }
.text-sm { font-size: var(--text-sm); }
.text-base { font-size: var(--text-base); }
.text-lg { font-size: var(--text-lg); }
.text-xl { font-size: var(--text-xl); }
.text-2xl { font-size: var(--text-2xl); }
.text-3xl { font-size: var(--text-3xl); }
.text-4xl { font-size: var(--text-4xl); }
.text-5xl { font-size: var(--text-5xl); }
.text-6xl { font-size: var(--text-6xl); }

/* ==========================================================================
   FONT WEIGHT UTILITIES — @layer utilities (no unlayered competitor)
   ========================================================================== */

@layer utilities {
    .font-light { font-weight: var(--font-light); }
    .font-normal { font-weight: var(--font-normal); }
    .font-medium { font-weight: var(--font-medium); }
    .font-semibold { font-weight: var(--font-semibold); }
    .font-bold { font-weight: var(--font-bold); }
}

/* ==========================================================================
   LINE HEIGHT UTILITIES — UNLAYERED SURVIVOR (duplicate UNLAYERED utilities.css)
   ========================================================================== */

.leading-none { line-height: var(--leading-none); }
.leading-tight { line-height: var(--leading-tight); }
.leading-snug { line-height: var(--leading-snug); }
.leading-normal { line-height: var(--leading-normal); }
.leading-relaxed { line-height: var(--leading-relaxed); }
.leading-loose { line-height: var(--leading-loose); }

/* ==========================================================================
   LETTER SPACING UTILITIES — UNLAYERED SURVIVOR (duplicate UNLAYERED utilities.css)
   ========================================================================== */

.tracking-tight { letter-spacing: var(--tracking-tight); }
.tracking-normal { letter-spacing: var(--tracking-normal); }
.tracking-wide { letter-spacing: var(--tracking-wide); }
.tracking-wider { letter-spacing: var(--tracking-wider); }

/* ==========================================================================
   TEXT ALIGNMENT — UNLAYERED SURVIVOR (duplicate UNLAYERED utilities.css)
   ========================================================================== */

.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-justify { text-align: justify; }

/* ==========================================================================
   TEXT TRANSFORM — @layer utilities (no unlayered competitor)
   ========================================================================== */

@layer utilities {
    .uppercase { text-transform: uppercase; }
    .lowercase { text-transform: lowercase; }
    .capitalize { text-transform: capitalize; }
    .normal-case { text-transform: none; }
}

/* ==========================================================================
   TEXT DECORATION — @layer utilities (no unlayered competitor)
   ========================================================================== */

@layer utilities {
    .underline { text-decoration: underline; }
    .line-through { text-decoration: line-through; }
    .no-underline { text-decoration: none; }
}

/* ==========================================================================
   PRICE DISPLAY TYPOGRAPHY — @layer components (no unlayered competitor)
   ========================================================================== */

@layer components {
    .price {
        font-family: var(--font-display);
        font-weight: var(--font-semibold);
        color: var(--purple-700);
    }

    .price--large {
        font-size: var(--text-2xl);
    }

    .price--small {
        font-size: var(--text-sm);
    }

    .price--sale {
        color: var(--error);
    }

    .price--original {
        font-weight: var(--font-normal);
        color: var(--text-muted);
        text-decoration: line-through;
    }
}

/* ==========================================================================
   PERFORMANCE OPTIMIZATIONS — @layer utilities (no unlayered competitor)
   ========================================================================== */

@layer utilities {
    /* Critical content should block render */
    .critical-font {
        /* stylelint-disable-next-line property-no-unknown -- pre-existing grandfathered descriptor used as a property; no-op in a normal rule but retained verbatim (no speculative deletion, zero-diff) */
        font-display: block;
    }

    /* Below-fold content can swap */
    .non-critical-font {
        /* stylelint-disable-next-line property-no-unknown -- pre-existing grandfathered descriptor used as a property; no-op in a normal rule but retained verbatim (no speculative deletion, zero-diff) */
        font-display: swap;
    }
}

/* Reduced-motion body element default consolidated into css/base.css @layer base
   under @media (prefers-reduced-motion: reduce) (FOUND-02, CD-1). */

/* ==========================================================================
   RESPONSIVE TYPOGRAPHY ADJUSTMENTS — UNLAYERED SURVIVOR
   ==========================================================================
   Body element font-size at each breakpoint is owned by css/base.css @layer
   base (FOUND-02, CD-1). The .hero-title / .section-title / .h1–.h3 mobile
   overrides below stay UNLAYERED in lockstep with their base-size siblings
   above (entangled with critical.css / style.css) — reconcile in Plan 09-09.
   ========================================================================== */

@media (max-width: 768px) {
    .hero-title {
        /* stylelint-disable-next-line scale-unlimited/declaration-strict-value -- fluid clamp(); no byte-exact token for the floor/preferred/ceiling (D9-05) */
        font-size: clamp(2rem, 8vw, 3rem);
    }

    .section-title {
        /* stylelint-disable-next-line scale-unlimited/declaration-strict-value -- fluid clamp(); no byte-exact token for the floor/preferred/ceiling (D9-05) */
        font-size: clamp(1.5rem, 6vw, 2rem);
    }
}

@media (max-width: 480px) {
    .h1 {
        font-size: var(--text-3xl);
    }

    .h2 {
        font-size: var(--text-2xl);
    }

    .h3 {
        font-size: var(--text-xl);
    }
}