/**
 * DLM Design System — Site-wide Foundation
 * Version: 2026-10-01-rc1
 *
 * Purpose:
 *   Global design tokens and typography ownership for Dual Language Market.
 *
 * Typography:
 *   Greycliff CF for display, UI and body, following Demian's October 1
 *   release direction. The existing Adobe kit qnc4snc provides 400 and 700
 *   in normal and italic styles; intermediate role names resolve to those
 *   actual available faces.
 *
 * Important:
 *   No font files are bundled. The existing hosted kit is an explicit
 *   deployment dependency; Arial remains the fallback if it is unavailable.
 *   Geometry tokens style content inside the native Botiga structure.
 */

:root {
    /* ============================================================
       TYPOGRAPHY FAMILIES
       ============================================================ */

    --dlm-font-ui:
        "greycliff-cf",
        Arial,
        sans-serif;

    --dlm-font-display: var(--dlm-font-ui);
    --dlm-font-body: var(--dlm-font-ui);

    /* ============================================================
       TYPOGRAPHY WEIGHTS
       ============================================================ */

    --dlm-weight-regular: 400;
    --dlm-weight-medium: 400;
    --dlm-weight-semibold: 700;
    --dlm-weight-bold: 700;
    --dlm-weight-heavy: 700;

    /* ============================================================
       SHARED PRESENTATION FRAME / SPACING
       Native Botiga builders and archive settings retain structure.
       ============================================================ */

    --dlm-container-max: 1360px;
    --dlm-container-edge: 40px;
    --dlm-section-space: 72px;
    --dlm-panel-radius: 22px;
    --dlm-control-radius: 10px;

    /* ============================================================
       TYPE SCALE
       ============================================================ */

    --dlm-text-xs: 11px;
    --dlm-text-sm: 13px;
    --dlm-text-base: 15px;
    --dlm-text-md: 16px;
    --dlm-text-lg: 18px;
    --dlm-text-xl: 24px;
    --dlm-text-2xl: 32px;
    --dlm-text-3xl: 40px;

    /* ============================================================
       LEADING
       ============================================================ */

    --dlm-leading-tight: 1.15;
    --dlm-leading-title: 1.20;
    --dlm-leading-ui: 1.35;
    --dlm-leading-body: 1.50;
    --dlm-leading-relaxed: 1.60;
}

@media (max-width: 1279px) {
    :root {
        --dlm-container-edge: 24px;
    }
}

@media (max-width: 767px) {
    :root {
        --dlm-container-edge: 18px;
    }
}


/* ================================================================
   SITE-WIDE TYPOGRAPHY FOUNDATION
   ----------------------------------------------------------------
   Deliberately avoid `* { font-family: ... }`.
   Third-party icon fonts, SVG systems, and specialized controls must remain
   free to declare their own font-family.
   ================================================================ */

html,
body {
    font-family: var(--dlm-font-body);
    font-synthesis: none;
}

body {
    font-weight: var(--dlm-weight-regular);
    line-height: var(--dlm-leading-body);
}


/* Native form controls do not reliably inherit typography everywhere. */
button,
input,
select,
textarea {
    font-family: var(--dlm-font-ui);
}


/* ================================================================
   DISPLAY / IDENTITY LAYER
   ================================================================ */

h1,
h2,
h3,
.site-title,
.entry-title,
.page-title,
.woocommerce-products-header__title,
.woocommerce div.product .product_title,
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.dlm-display-title {
    font-family: var(--dlm-font-display);
}


/* Major page/product headings. */
h1,
.entry-title,
.page-title,
.woocommerce-products-header__title,
.woocommerce div.product .product_title {
    font-weight: var(--dlm-weight-semibold);
    line-height: var(--dlm-leading-title);
    letter-spacing: -0.02em;
}


/* Section and product-card identity. */
h2,
h3,
.woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-weight: var(--dlm-weight-semibold);
    line-height: var(--dlm-leading-title);
    letter-spacing: -0.01em;
}


/* ================================================================
   UI / INFORMATION LAYER
   ================================================================ */

p,
li,
dt,
dd,
label,
legend,
table,
th,
td,
figcaption,
blockquote,
small,
.woocommerce,
.woocommerce button,
.woocommerce input,
.woocommerce select,
.woocommerce textarea,
.dokan-dashboard,
.dokan-dashboard button,
.dokan-dashboard input,
.dokan-dashboard select,
.dokan-dashboard textarea,
.dlm-marketplace-filters {
    font-family: var(--dlm-font-ui);
}


/* Pricing is informational, not display typography. */
.price,
.woocommerce-Price-amount,
.amount {
    font-family: var(--dlm-font-ui);
    font-variant-numeric: tabular-nums;
}


/* ================================================================
   DLM MARKETPLACE SEMANTIC ROLES
   ================================================================ */

/* Dialog/page identity should use the display layer. */
.dlm-filter-dialog__header h2,
.dlm-subject-pane-head h3 {
    font-family: var(--dlm-font-display);
    font-weight: var(--dlm-weight-semibold);
}


/* Interactive discovery remains in the highly readable UI family. */
.dlm-marketplace-filters button,
.dlm-marketplace-filters input,
.dlm-marketplace-filters select,
.dlm-filter-launcher__title,
.dlm-filter-launcher__summary,
.dlm-subject-domain,
.dlm-subject-card,
.dlm-resource-card,
.dlm-grade-choice,
.dlm-grade-band,
.dlm-discovery__chip,
.dlm-dialog-chip {
    font-family: var(--dlm-font-ui);
}


/* ================================================================
   UTILITY CLASSES
   ----------------------------------------------------------------
   Use these instead of creating one-off font-family declarations.
   ================================================================ */

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

.dlm-type-ui {
    font-family: var(--dlm-font-ui) !important;
}

.dlm-type-xs   { font-size: var(--dlm-text-xs) !important; }
.dlm-type-sm   { font-size: var(--dlm-text-sm) !important; }
.dlm-type-base { font-size: var(--dlm-text-base) !important; }
.dlm-type-md   { font-size: var(--dlm-text-md) !important; }
.dlm-type-lg   { font-size: var(--dlm-text-lg) !important; }
.dlm-type-xl   { font-size: var(--dlm-text-xl) !important; }
.dlm-type-2xl  { font-size: var(--dlm-text-2xl) !important; }
.dlm-type-3xl  { font-size: var(--dlm-text-3xl) !important; }


/* ================================================================
   LANGUAGE / ACCESSIBILITY SAFEGUARDS
   ================================================================ */

/*
 * Do not shrink Spanish to force parity with English.
 * Component layout owns wrapping and expansion.
 */
:lang(es),
:lang(en) {
    font-kerning: normal;
}


/* Preserve readable focus behavior; typography must not erase it. */
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
a:focus-visible {
    text-decoration-skip-ink: auto;
}


/* High-impact DLM display moments only. */
.dlm-type-heavy {
    font-family: var(--dlm-font-display) !important;
    font-weight: var(--dlm-weight-heavy) !important;
}

/* DLM-TYPE-001: functional labels use the real bold face and natural casing. */
body.dlm-approved-header-local table th,
body.dlm-approved-header-local .woocommerce-form-login__submit,
body.dlm-approved-header-local .botiga-breadcrumb-trail,
body.dlm-approved-header-local .dlm-footer-creator-cta__eyebrow,
body.dlm-approved-header-local .dlm-footer-creator-cta__eyebrow [data-dlm-lang] {
    font-family: var(--dlm-font-ui);
    font-weight: var(--dlm-weight-bold) !important;
    letter-spacing: normal !important;
    text-transform: none !important;
}
body.dlm-approved-header-local table th {
    font-size: var(--dlm-text-base);
}

/* DLM-TYPE-002: shared UI text uses the supported bold face in every language. */
body.dlm-approved-header-local.dlm-botiga-native-footer-v1 .bhfb-footer :is(
    .dlm-footer-love,
    .dlm-footer-love .dlm-footer-i18n,
    .dlm-footer-heart,
    .dlm-footer-copyright-copy,
    .dlm-footer-newsletter__lead,
    .dlm-footer-newsletter__microcopy,
    .dlm-footer-newsletter__status,
    .dlm-footer-newsletter input[type="email"],
    .dlm-footer-creator-cta p
),
body.dlm-approved-header-local .bhfb-header :is(
    .dlm-finder-choice small,
    .dlm-finder-action select,
    .dlm-finder-selection small,
    .dlm-finder-panel__header p,
    .dlm-finder-featured__note,
    .dlm-editorial-entry small,
    .dlm-menu-intro p,
    .dlm-mega-editorial__header p,
    .dlm-mega-editorial__partner p,
    input[type="search"]
),
body.dlm-approved-header-local .dlm-shop-hero__description,
body.dlm-approved-header-local .dlm-shop-intro p,
body.dlm-approved-header-local .dlm-destination__lead,
body.dlm-approved-header-local .dlm-creator-spotlight__content p,
body.dlm-approved-header-local .dlm-creator-spotlights__heading p,
body.dlm-approved-header-local .dlm-creator-cta p,
body.dlm-approved-header-local .dlm-shop-story__header p,
body.dlm-approved-header-local .dlm-shop-story-card p,
body.dlm-approved-header-local .dlm-marketplace-filters :is(
    .dlm-filter-launcher__summary,
    .dlm-subject-card__copy span,
    .dlm-resource-card__copy span,
    .dlm-subject-root__count,
    .dlm-grade-band span,
    .dlm-filter-dialog__header p
),
body.dlm-approved-header-local .dlm-product-card__vendor,
body.dlm-approved-header-local .dlm-product-card__vendor-prefix,
body.dlm-approved-header-local .dlm-wishlist-intro,
body.dlm-approved-header-local .dlm-wishlist-empty p,
body.dlm-approved-header-local .site-main.dlm-marketplace-archive :is(
    .woocommerce-result-count,
    .woocommerce-ordering select
),
body.dlm-approved-header-local.woocommerce.archive .dlm-marketplace-filters :is(
    .dlm-filter-launcher__summary,
    .dlm-subject-card__copy span,
    .dlm-resource-card__copy span,
    .dlm-subject-root__count,
    .dlm-grade-band span,
    .dlm-filter-dialog__header p
) {
    font-family: var(--dlm-font-ui) !important;
    font-weight: var(--dlm-weight-bold) !important;
    letter-spacing: normal !important;
    text-transform: none !important;
}


/* DLM-PDP-002: native product breadcrumbs and notices follow the shared UI role. */
body.single-product.dlm-approved-header-local .woocommerce-breadcrumb,
body.single-product.dlm-approved-header-local .woocommerce-breadcrumb a,
body.single-product.dlm-approved-header-local .woocommerce-info,
body.single-product.dlm-approved-header-local .woocommerce-info a {
    font-family: var(--dlm-font-ui) !important;
    font-weight: var(--dlm-weight-bold) !important;
    letter-spacing: normal !important;
    text-transform: none !important;
}
/* DLM-TYPE-004: product navigation stays readable beside the bold product UI. */
body.single-product.dlm-approved-header-local :is(.woocommerce-breadcrumb, .botiga-breadcrumb-trail),
body.single-product.dlm-approved-header-local :is(.woocommerce-breadcrumb, .botiga-breadcrumb-trail) a {
    font-family: var(--dlm-font-ui) !important;
    font-weight: var(--dlm-weight-bold) !important;
    font-size: var(--dlm-text-base) !important;
    color: #475467 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
}


/* DLM-TYPE-003: visible storefront copy shares the supported bold UI face.
 * Text roles are explicit: never reset every descendant or an icon font.
 * Keep the real regular face/token available for specialist editor controls.
 */
body.dlm-approved-header-local {
    font-weight: var(--dlm-weight-bold);
}

body.dlm-approved-header-local :is(
    p, li, dt, dd, label, legend, th, td, caption, figcaption, blockquote, small,
    button, input, select, textarea
):not(:where(
    .wp-editor-wrap *, .mce-container *, .tox *, .CodeMirror *, .ace_editor *,
    .fa, .fas, .far, .fab, .dashicons, .dlm-icon
)),
body.dlm-approved-header-local :is(
    .woocommerce-product-details__short-description,
    .woocommerce-product-details__short-description span,
    .product_meta, .product_meta span, .product_meta a,
    .stock, .woocommerce-review-link,
    .wc-tabs a, .woocommerce-tabs .tabs a,
    .woocommerce-MyAccount-navigation a,
    .woocommerce-MyAccount-content,
    .woocommerce-form__label span,
    .woocommerce-form-login__rememberme span,
    .woocommerce-LostPassword a,
    .comment-form-rating, .comment-form-rating label,
    .comment-notes, .comment-reply-title, .must-log-in a,
    .woocommerce-review__author, .woocommerce-review__published-date
),
body.dlm-approved-header-local .dlm-marketplace-filters :is(
    .dlm-subject-root,
    .dlm-filter-group-title,
    .dlm-quick-starts h4,
    .dlm-recent-filters__head h3,
    .dlm-subject-rail h3
) {
    font-family: var(--dlm-font-ui) !important;
    font-weight: var(--dlm-weight-bold) !important;
    letter-spacing: normal !important;
    text-transform: none !important;
}

/* Editor chrome has its own typography; storefront rules stop at this boundary. */
body.dlm-approved-header-local :is(
    .wp-editor-wrap, .mce-container, .tox, .CodeMirror, .ace_editor
) {
    font-weight: var(--dlm-weight-regular);
}

body.single-product.dlm-approved-header-local .woocommerce-product-details__short-description {
    font-size: var(--dlm-text-md);
    line-height: var(--dlm-leading-body);
}

body.single-product.dlm-approved-header-local .woocommerce-product-details__short-description p {
    font-size: inherit;
    line-height: inherit;
}

body.single-product.dlm-approved-header-local .product_meta,
body.single-product.dlm-approved-header-local .woocommerce-review-link {
    font-size: var(--dlm-text-base);
    line-height: var(--dlm-leading-body);
    overflow-wrap: anywhere;
}
body.single-product.dlm-approved-header-local :is(.woocommerce-breadcrumb, .botiga-breadcrumb-trail) {
    opacity: 1;
}
body.single-product.dlm-approved-header-local :is(.woocommerce-breadcrumb, .botiga-breadcrumb-trail) a:is(:hover, :focus-visible) {
    text-decoration: underline;
    text-underline-offset: 0.18em;
}