/* ============================================================================
   Casa Moderna — casa.css
   Single shared design system: tokens → base/reset → a11y → utilities.
   Loaded in <head> BEFORE the inline cm_theme bootstrap so the CMS
   <style id="cm-theme"> override still wins over these defaults.
   Tier-1 token names are CMS-owned — do NOT rename or drop them.
   ========================================================================== */

:root{
  /* ---- Tier-1 — CMS-owned (CMS writes these exact names) ---- */
  --green:      #339966;   /* Casa Moderna brand green (official) — logo, CTAs, links, nav, bands */
  --green-dark: #2A7D54;   /* CMS derives ×0.82 — keep the name; hover/pressed */
  --cream:      #F6F3EC;   /* warm greige page background (CMS colorBg) */
  --warm:       #EFEBE1;   /* alternate section background (CMS colorWarm) */
  --line:       #E3DED3;   /* hairlines / borders (CMS colorLine) */
  --text:       #2B2B28;   /* warm near-black body text (CMS colorText) */
  --muted:      #63625B;   /* AA-passing secondary text (replaces #9a9a94/#7a8179) */

  /* ---- Tier-2 — additive, NOT CMS-written ---- */
  --ink:        #1B2D27;   /* deep forest — primary display headings */
  --accent:     #B08D57;   /* brass — decorative/large only (hairlines, numerals, eyebrows) */
  --accent-ink: #8A6A3B;   /* text-safe brass (~5:1 on cream) — prices, small brass text */
  --paper:      #FFFFFF;   /* card / surface */
  --green-tint: #EAF0EC;   /* faint green wash for soft fills */

  /* semantic aliases so migrated literals inherit CMS colour edits */
  --btn-bg: var(--green);
  --price: var(--accent-ink);
  --heading: var(--ink);
  --hairline: var(--line);
  --surface: var(--paper);
  --surface-2: var(--warm);

  /* type */
  --font-head:"Cormorant Garamond", Georgia, serif;
  --font-body:"Inter", Arial, sans-serif;
  --font-ui:"Jost", "Inter", sans-serif;
  --fs-hero: clamp(46px, 6.2vw, 88px);
  --fs-h1:   clamp(36px, 4.4vw, 60px);
  --fs-h2:   clamp(30px, 3.6vw, 46px);
  --fs-h3:   clamp(21px, 2.2vw, 28px);
  --fs-body: 17px;
  --fs-sm:   14px;
  --fs-eyebrow: 12px;
  --lh-body: 1.65;

  /* spacing (4px base) */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px;
  --space-6:32px; --space-7:48px; --space-8:64px; --space-9:96px; --space-10:128px;

  /* form / layout */
  --radius-card:8px; --radius-btn:6px; --radius-pill:100px;
  --shadow-1:0 10px 24px rgba(27,45,39,.06);
  --shadow-2:0 18px 44px rgba(27,45,39,.11);
  --shadow-3:0 30px 70px rgba(27,45,39,.16);
  --site-max:1440px;
  --site-pad:30px;   /* narrows to 20px on mobile (see breakpoint below) */

  /* motion */
  --dur:240ms; --dur-slow:420ms;
  --ease:cubic-bezier(.22,.61,.36,1);
  --focus-ring: var(--green);
}

/* mobile gutter (was a page-level :root override) */
@media (max-width:768px){ :root{ --site-pad:20px; } }

/* ---------------------------------------------------------------- base --- */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
img,svg,video{max-width:100%;height:auto}
::selection{background:var(--green);color:#fff}

/* ------------------------------------------------------------ a11y ------- */
/* Visible keyboard focus everywhere (site currently relies on :hover only). */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
[role="button"]:focus-visible{
  outline:2px solid var(--focus-ring);
  outline-offset:3px;
  border-radius:3px;
}
/* don't show the ring for mouse users on elements that manage their own state */
:focus:not(:focus-visible){outline:none}

/* Comfortable minimum hit area for the small uppercase links/icons. */
@media (pointer:coarse){
  .nav a, .icons a, .cat-footer-arrow, .co-back-btn, .cart-item-remove{
    min-height:44px;
  }
}

/* Honour reduced-motion: still show everything, just stop the movement. */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .hero-slide,.hero-slide-a,.hero-slide-b,.hero-slide-c{transform:none !important}
}

/* --------------------------------------------------------- utilities ----- */
/* Brass eyebrow — refined, letter-spaced label used above section headings. */
.u-eyebrow{
  font-family:var(--font-ui);
  font-size:var(--fs-eyebrow);
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.2em;
  color:var(--accent-ink);
}
/* Thin brass rule for section flourishes. */
.u-rule{width:44px;height:1px;background:var(--accent);opacity:.85}

/* Scroll-reveal: fade+rise once in view. Hiding is GATED behind html.reveal-on,
   which the observer script adds only when JS runs and reduced-motion is off —
   so with no JS (or reduced-motion) every element is simply visible. */
html.reveal-on [data-reveal]{opacity:0;transform:translateY(18px);
  transition:opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
  will-change:opacity,transform}
html.reveal-on [data-reveal].is-in{opacity:1;transform:none}
