/* ═══════════════════════════════════════════════════════════════
   AFROTUNDA — EDITORIAL LAYER ("Label 2026")
   The first-party-label restaging of the same brand. Nothing here
   replaces the marketplace tokens; it reassigns their ROLES for a
   quieter, image-led site — the direction set by the transition plan
   and the reference sites (hardgraft, Verve Coffee, Suso Outdoors).

   Three moves define it:
   1. Oxblood becomes an ACCENT and a footer/CTA ground, not a field.
      Big red hero panels belong to the marketplace era.
   2. Texture off. No grain, no compass tile, no linen on label pages.
   3. Type roles rotate: Lora (roman, 400, sentence case) carries
      headlines; Barlow Semi Condensed drops to small wide-tracked
      labels, nav and buttons; DM Sans keeps body.
   ══════════════════════════════════════════════════════════════ */
:root {
  /* ── Editorial neutrals — cooler and lighter than the marketplace paper ── */
  --at-canvas: #f7f5f2;      /* page ground */
  --at-canvas-2: #efece7;    /* alternating band */
  --at-stone: #e4dfd8;       /* image well / soft fill */
  --at-hair: #e0dbd4;        /* the only divider colour on label pages */
  --at-hair-strong: #cfc8bf; /* emphasis divider */
  --at-ink: #17150f;         /* headlines */
  --at-ink-soft: #5c5850;    /* body */
  --at-ink-faint: #6c675f;   /* meta, captions, disabled — AA on both neutral grounds */

  /* ── Editorial semantics ── */
  --ed-surface: var(--at-canvas);
  --ed-surface-alt: var(--at-canvas-2);
  --ed-surface-card: var(--at-white);
  --ed-media: var(--at-stone);
  --ed-line: var(--at-hair);
  --ed-line-strong: var(--at-hair-strong);
  --ed-text-title: var(--at-ink);
  --ed-text-body: var(--at-ink-soft);
  --ed-text-meta: var(--at-ink-faint);
  --ed-accent: var(--at-red);
  --ed-accent-soft: var(--at-amber);
  --ed-ground: var(--at-red);       /* the one oxblood CTA band, at most once per page */
  --ed-ground-deep: #3f0f00;       /* HOVER DARKENING ONLY — never a surface. The footer
                                      used to sit on this and it read as muddy brown. */
  --ed-footer: var(--at-canvas-2);  /* the footer ground: light, same family as the page */

  /* ── Editorial type ── */
  --ed-font-title: var(--at-font-serif);   /* Lora, roman, sentence case */
  --ed-font-label: var(--at-font-display); /* Barlow SC, uppercase, tracked */
  --ed-font-body: var(--at-font-body);     /* DM Sans */

  --ed-size-hero: clamp(2.4rem, 4.4vw, 4.1rem);
  --ed-size-h2: clamp(1.7rem, 2.6vw, 2.5rem);
  --ed-size-h3: clamp(1.15rem, 1.5vw, 1.45rem);
  --ed-size-lead: clamp(1rem, 1.25vw, 1.15rem);
  --ed-size-body: 1rem;
  /* The three small roles sit on a 14px floor. They were 0.8/0.66/0.72rem
     (12.8/10.6/11.5px against the 16px root label.css pins) — the label sizes
     in particular were the smallest type on the site while also carrying the
     widest tracking, which is the combination that reads worst. Meta and label
     now share the floor; label-lg keeps the one step above it that the hero
     eyebrow, the accordion head and the filter bar use to out-rank a label. */
  --ed-size-meta: 0.875rem;      /* was 0.8rem   (12.8px) */
  --ed-size-label: 0.875rem;     /* was 0.66rem  (10.6px) */
  --ed-size-label-lg: 0.9375rem; /* was 0.72rem  (11.5px) */

  --ed-weight-title: 400;      /* headlines never bolder than 500 */
  --ed-weight-title-em: 500;
  --ed-leading-hero: 1.12;
  --ed-leading-title: 1.22;
  --ed-leading-body: 1.72;
  --ed-track-title: -0.015em;
  --ed-track-label: 0.16em;
  --ed-track-label-wide: 0.22em;

  /* ── Editorial air — the single biggest difference from the marketplace ── */
  /* SUPERSEDED — label.css re-declares both at :root ("The rhythm stays
     tight", 2026-08-28) and loads after this file, so these two values are
     never what renders. Kept as the design import's own numbers; change the
     ones in label.css, not these. */
  --ed-section-y: clamp(72px, 9vw, 140px); /* @kind spacing */
  --ed-section-y-tight: clamp(48px, 6vw, 88px); /* @kind spacing */
  --ed-gutter: clamp(20px, 4vw, 64px); /* @kind spacing */
  --ed-max: 1440px;          /* label pages run wider and more full-bleed */
  --ed-max-text: 620px;
  --ed-grid-gap: clamp(12px, 1.6vw, 28px);
  --ed-grid-gap-tight: 2px;  /* the flush image mosaic */

  /* ── Editorial media ratios ── */
  --ed-ratio-product: 3 / 4; /* @kind other */
  --ed-ratio-editorial: 4 / 5; /* @kind other */
  --ed-ratio-wide: 16 / 9; /* @kind other */
  --ed-ratio-hero: 21 / 9; /* @kind other */

  /* ── Editorial interaction — quiet: no lift, no shadow, no bar wipe ── */
  --ed-dur: 0.4s; /* @kind other */
  --ed-dur-fast: 0.2s; /* @kind other */
  --ed-ease: cubic-bezier(0.22, 0.61, 0.36, 1); /* @kind other */
  --ed-hover-image-scale: 1.02; /* @kind other */
  --ed-hover-dim: 0.72; /* @kind other */
  --ed-shadow: none; /* @kind other */
  --ed-radius: 0; /* @kind other */

  /* ── Controls ── */
  /* ── Reveal — 6px and a fade. Almost imperceptible, on purpose. ── */
  --ed-reveal-offset: 6px;
  --ed-reveal-dur: 0.7s; /* @kind other */
  --ed-reveal-stagger: 0.06s; /* @kind other */

  --ed-control-h: 46px;
  --ed-control-pad: 15px 34px;
  --ed-control-pad-sm: 11px 22px;
}

/* Opt-in scope. Put class="at-editorial" on <body> (or any wrapper) for a
   label-era page: the marketplace semantics repoint at the editorial ones,
   so components authored against the marketplace surface and text
   semantics follow along automatically. */
.at-editorial {
  --surface-page: var(--ed-surface);
  --ed-scrim: linear-gradient(to top, rgba(23,21,15,.55) 0%, rgba(23,21,15,.1) 45%, transparent 70%); /* @kind color */
  --surface-card: var(--ed-surface-card);
  --surface-raised: var(--ed-surface-alt);
  --surface-sunken: var(--ed-surface-alt);
  --surface-media: var(--ed-media);
  --text-heading: var(--ed-text-title);
  --text-body: var(--ed-text-body);
  --text-muted: var(--ed-text-meta);
  --line-hairline: var(--ed-line);
  --at-border: var(--ed-line);
  --at-cream: var(--ed-surface);
  --at-warm: var(--ed-surface-alt);
  --at-clay: var(--ed-media);
  --at-slate: var(--ed-text-body);
}