/*
 * ============================================================================
 * AFROTUNDA — Brand tokens (from afrotunda-child design-tokens v3)
 *
 * Ported for the Label 2026 theme. Two deliberate differences from the
 * source: the film-grain overlay is deleted, and note that editorial.css
 * loads AFTER this file and redefines --at-ink (#161616 here -> #17150f).
 * That is intended: the label layer wants a warmer, softer heading ink.
 * Loaded on every page via functions.php (handle: afrotunda-design-tokens).
 *
 * Structure:
 *   1. PRIMITIVES  — raw values (palette, type, spacing, radius, shadow…)
 *   2. SEMANTIC    — role-based tokens that component CSS should reference
 *   3. COMPONENTS  — global elements shared across all templates
 *
 * Rule of thumb: components reference SEMANTIC tokens, semantic tokens
 * reference PRIMITIVES. Avoid hardcoding hex / px in page CSS — add a token.
 * Values reconciled from the child theme CSS + Astra global settings
 * (Elementor's global kit is stock default and intentionally ignored).
 * ============================================================================
 */

:root {

  /* ========================================================================
     1. PRIMITIVES
     ======================================================================== */

  /* ── Brand ── */
  --at-red:         #5e1600;   /* primary — Astra global-color-0 */
  --at-red-mid:     #7a2008;   /* primary hover / gradient stop */
  --at-amber:       #d88b34;   /* secondary — Astra global-color-1 */
  --at-amber-pale:  #f0c47a;
  --at-amber-soft:  #f0c060;

  /* ── Ink / neutrals (dark → light) ── */
  --at-black:       #0e0e0e;   /* deepest */
  --at-espresso:    #2a1a10;   /* warm brown — black→red gradient mid-stop */
  --at-ink:         #161616;   /* heading ink — Astra global-color-2 */
  --at-charcoal:    #1c1c1c;
  --at-slate:       #4B4F58;   /* body text — Astra global-color-3 */
  --at-gray:        #9ca3af;   /* muted / disabled */
  --at-border:      #ddd5c8;   /* hairline borders */

  /* ── Surfaces (warm) ── */
  --at-cream:       #faf7f3;   /* page background */
  --at-warm:        #f5f0ea;
  --at-sand:        #f0ebe6;   /* most-used warm surface */
  --at-parchment:   #ede6dc;
  --at-mist:        #ece8e6;   /* Astra global-color-6 */
  --at-white:       #ffffff;

  /* ── Feedback / status (WooCommerce + Dokan badges) ── */
  --at-success:        #1b5e20;
  --at-success-bg:     #e8f5e9;
  --at-success-border: #a5d6a7;
  --at-info:           #0d47a1;
  --at-info-bg:        #e3f2fd;
  --at-danger:         #b71c1c;
  --at-danger-bg:      #fbe9e7;
  --at-warning:        #e65100;
  --at-warning-deep:   #92400e;
  --at-warning-bg:     #fff8e1;
  --at-warning-bg-alt: #fff8e7;
  --at-warning-soft:   #ffe082;

  /* ── Overlays / tints ── */
  --at-overlay-dark:   rgba(0, 0, 0, 0.55);
  --at-overlay-light:  rgba(255, 255, 255, 0.85);
  --at-tint-red:       rgba(94, 22, 0, 0.12);
  --at-tint-red-soft:  rgba(94, 22, 0, 0.03);

  /* ── Typography: families ── */
  --at-font-display: 'Barlow Semi Condensed', sans-serif;  /* headings, buttons, labels */
  --at-font-serif:   'Lora', 'Georgia', serif;             /* editorial accents */
  --at-font-body:    'DM Sans', 'Roboto', sans-serif;      /* body — overrides Astra's Roboto */

  /* ── Typography: weights (only weights actually loaded per family) ──
     Barlow: 300 400 600 700 900 · Lora: 400 600 · DM Sans: 300 400 500 */
  --at-fw-light:    300;
  --at-fw-regular:  400;
  --at-fw-medium:   500;
  --at-fw-semibold: 600;
  --at-fw-bold:     700;
  --at-fw-black:    900;

  /* ── Typography: size scale (UI text) ──
     14px is the floor. Nothing in the brand renders below it: the audience is
     mobile-heavy and the wide label tracking makes small type harder to read,
     not easier. 2xs and xs were 0.68/0.72rem (10.9/11.5px) and both now sit on
     the floor — below 14px there is no room left to separate them, so a layout
     that needs two small steps gets them from 2xs and sm, not from a smaller
     size. If a layout only worked at 11px, give it more room. */
  --at-text-2xs:     0.875rem;   /* was 0.68rem — the floor */
  --at-text-xs:      0.875rem;   /* was 0.72rem — folded into the floor */
  --at-text-sm:      0.9rem;     /* was 0.82rem */
  --at-text-md:      0.9375rem;  /* was 0.88rem */
  --at-text-base:    1rem;
  --at-text-lg:      1.1rem;
  --at-text-xl:      1.3rem;
  --at-text-2xl:     1.6rem;
  --at-text-3xl:     2rem;
  --at-text-4xl:     3rem;
  --at-text-display: clamp(2.8rem, 5vw, 5rem);  /* hero headlines */

  /* ── Heading scale (responsive — mirrors Astra H1–H3) ── */
  --at-h1: 48px;  --at-h1-tablet: 40px;  --at-h1-mobile: 32px;
  --at-h2: 38px;  --at-h2-tablet: 32px;  --at-h2-mobile: 25px;
  --at-h3: 30px;  --at-h3-tablet: 26px;  --at-h3-mobile: 22px;

  /* ── Line-heights ── */
  --at-lh-none:    1;      /* single-line UI */
  --at-lh-display: 0.92;   /* tight display headlines */
  --at-lh-tight:   1.2;
  --at-lh-snug:    1.5;
  --at-lh-relaxed: 1.7;    /* body copy */
  --at-lh-loose:   1.85;

  /* ── Letter-spacing ── */
  --at-ls-tight:   -0.01em;  /* large display */
  --at-ls-normal:  0;
  --at-ls-wide:    0.04em;
  --at-ls-wider:   0.08em;
  --at-ls-label:   0.1em;
  --at-ls-button:  0.12em;
  --at-ls-caps:    0.15em;
  --at-ls-eyebrow: 0.18em;   /* .afrotunda-label */

  /* ── Spacing scale ── */
  --at-space-3xs: 4px;
  --at-space-xs:  8px;
  --at-space-sm:  16px;
  --at-space-ms:  24px;
  --at-space-md:  32px;
  --at-space-ml:  48px;
  --at-space-lg:  64px;
  --at-space-xll: 96px;
  --at-space-xl:  120px;
  --at-space-2xl: 160px;

  /* ── Radius ── (sharp corners are a brand signature: 0 by default) */
  --at-radius:        0;
  --at-radius-sm:     4px;
  --at-radius-md:     8px;
  --at-radius-pill:   999px;
  --at-radius-circle: 50%;

  /* ── Shadows (warm, red-tinted elevation) ── */
  --at-shadow-sm: 0 12px 40px rgba(94, 22, 0, 0.10);
  --at-shadow-md: 0 16px 48px rgba(94, 22, 0, 0.12);
  --at-shadow-lg: 0 20px 60px rgba(94, 22, 0, 0.12);
  --at-shadow-ui: 0 2px 8px  rgba(0, 0, 0, 0.15);

  /* ── Transitions ── */
  --at-transition:      0.25s ease;
  --at-transition-slow: 0.75s ease;

  /* ── Layout ── */
  --at-max-width: 1200px;                  /* matches Astra container + Elementor kit */
  --at-gutter:    clamp(24px, 5vw, 80px);

  /* ── Z-index ── */
  --at-z-base:    1;
  --at-z-header:  100;
  --at-z-overlay: 1000;
  --at-z-grain:   9999;

  /* Breakpoints are reference values only (CSS vars can't be used in @media):
       mobile ≤ 768px · tablet ≤ 992px · desktop ≥ 1200px */


  /* ========================================================================
     2. SEMANTIC TOKENS — reference these from component / page CSS
     ======================================================================== */

  /* — Color roles — */
  --color-primary:       var(--at-red);
  --color-primary-hover: var(--at-red-mid);
  --color-accent:        var(--at-amber);
  --color-on-primary:    var(--at-white);
  --color-text:          var(--at-slate);
  --color-heading:       var(--at-ink);
  --color-muted:         var(--at-gray);
  --color-bg:            var(--at-cream);
  --color-surface:       var(--at-white);
  --color-surface-alt:   var(--at-sand);
  --color-border:        var(--at-border);

  /* — Button tokens (consumed by .afrotunda-btn below) — */
  --btn-font:     var(--at-font-display);
  --btn-weight:   var(--at-fw-bold);
  --btn-size:     0.875rem;  /* was 0.85rem (13.6px) — button labels clear the 14px floor */
  --btn-tracking: var(--at-ls-button);
  --btn-radius:   var(--at-radius);
  --btn-pad-y:    16px;
  --btn-pad-x:    40px;
  --btn-pad-y-sm: 12px;
  --btn-pad-x-sm: 28px;

  /* ── Legacy aliases (kept for backward compatibility with existing CSS) ── */
  --red:    var(--at-red);
  --amber:  var(--at-amber);
  --black:  var(--at-black);
  --slate:  var(--at-slate);
  --warm:   var(--at-warm);
  --border: var(--at-border);
  --cream:  var(--at-cream);
}


/*
 * ============================================================================
 * 3. GLOBAL COMPONENTS — shared across every template
 * ============================================================================
 */

/* Global body font — DM Sans site-wide (loaded via Google Fonts in functions.php). */
body {
  font-family: var(--at-font-body);
}

/* Headings — Barlow Semi Condensed site-wide; reinforces Astra across Dokan/Woo output. */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--at-font-display);
}

/* Eyebrow label utility — scoped with .afrotunda-label to avoid conflicts. */
.afrotunda-label {
  font-family: var(--at-font-display);
  font-weight: var(--at-fw-semibold);
  font-size: var(--at-text-2xs);
  text-transform: uppercase;
  letter-spacing: var(--at-ls-eyebrow);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--at-amber);
}
.afrotunda-label::before {
  content: '';
  display: block;
  width: 24px;
  height: 1.5px;
  background: currentColor;
  flex-shrink: 0;
}

/* Grain texture overlay: REMOVED for the label layer.
   The marketplace theme painted a fixed fractal-noise overlay over every page
   via body::after. Label 2026's second move is "texture off" — no grain, no
   compass tile, no linen; the atmosphere comes from the photography and the
   amount of empty space around it. Deleted here rather than overridden so
   nothing downstream has to fight it. --at-z-grain is left defined so any
   stray reference still resolves. */

/* Button system — base + variants. Driven by the --btn-* tokens above. */
.afrotunda-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--btn-font);
  font-weight: var(--btn-weight);
  font-size: var(--btn-size);
  text-transform: uppercase;
  letter-spacing: var(--btn-tracking);
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: background var(--at-transition), color var(--at-transition), transform var(--at-transition);
  border-radius: var(--btn-radius);
}
.afrotunda-btn--primary {
  background: var(--at-amber);
  color: var(--at-white);
  padding: var(--btn-pad-y) var(--btn-pad-x);
}
.afrotunda-btn--primary:hover {
  background: var(--at-white);
  color: var(--at-red);
  transform: translateY(-2px);
}
.afrotunda-btn--outline {
  background: transparent;
  color: var(--at-red);
  border: 1.5px solid var(--at-red);
  padding: var(--btn-pad-y-sm) var(--btn-pad-x-sm);
}
.afrotunda-btn--outline:hover {
  background: var(--at-red);
  color: var(--at-white);
}

/* Scroll reveal — used across all page templates. */
.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.75s ease, transform 0.75s ease;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }

/* ============================================================
   GLOBAL OVERFLOW GUARDS — fixes the ~390px right-edge cut.
   Measured offenders (headless probe, 390px viewport):
     1. Homepage Premium Addons blog row (.premium-blog-wrap)
        rendered 402px wide → page scrollWidth 396.
     2. Dokan store-page pagination (ul.dokan-pagination)
        pushed scrollWidth to 406 on stores with many pages.
   Plus a sticky-safe clip on the root so any future wide widget
   can't widen the layout viewport again (overflow-x: clip does
   not create a scroll container, so position: sticky keeps
   working — unlike overflow-x: hidden).
   ============================================================ */

html, body {
  overflow-x: clip;
  max-width: 100%;
}

.premium-blog-wrap,
.premium-blog-wrap .premium-blog-post-outer-container {
  max-width: 100% !important;
  min-width: 0 !important;
}

.dokan-pagination-container {
  max-width: 100%;
  overflow-x: auto;
}

.dokan-pagination-container .dokan-pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 100%;
}

/* ----------------------------------------------------------------------------
 * Product reviews — pull WooCommerce's reviews block onto the design system.
 * Form controls (input/select/textarea/button) do NOT inherit font-family, so
 * the review form rendered in the browser default font. Set it explicitly.
 * -------------------------------------------------------------------------- */
.woocommerce-Reviews,
.woocommerce-Reviews p,
.woocommerce-Reviews label,
.woocommerce-Reviews .comment-text,
.woocommerce-Reviews .meta,
.woocommerce-noreviews {
  font-family: var(--at-font-body);
}

.woocommerce-Reviews #reply-title,
.woocommerce-Reviews .woocommerce-Reviews-title,
.woocommerce-Reviews h2,
.woocommerce-Reviews h3,
#review_form #reply-title {
  font-family: var(--at-font-display);
}

/* Form fields don't inherit fonts — scope to the review form explicitly. */
.woocommerce-Reviews input,
.woocommerce-Reviews textarea,
.woocommerce-Reviews select,
#review_form input,
#review_form textarea,
#review_form select {
  font-family: var(--at-font-body);
}

.woocommerce-Reviews .submit,
#review_form .submit,
#review_form button[type="submit"] {
  font-family: var(--at-font-display);
}