/* tokens.css — Color System v3: Amber + Forest Bitonal palette (2026-04-03) */
/* Crystal --cx stays inline per product page. */

:root {
  color-scheme: light;
  /* ── Primitive color tokens ── */
  --c-bg:        #FAF7F1;          /* Pearl */
  --c-text:      #262626;          /* Leather */
  --c-accent:    #A89478;          /* Amber */
  --c-secondary: #5C5445;          /* Secondary — body text, descriptions */
  --c-dark:      #283618;          /* Black Forest — hero bg, banner bg, darkest surface */
  --c-dark-bg:   #344422;          /* Forest Medium — Origen/footer dark sections */
  --c-dbg:       #344422;          /* Forest Medium — alias used by product pages */
  --c-dark-text: #F5F0E8;          /* Warm white — headlines on dark bg */
  --c-dtext:     #F5F0E8;          /* Warm white — alias used by product pages */
  --c-dark-sub:  #C9AD88;          /* Gold — labels/eyebrows on dark bg */
  --c-gold:      #C9AD88;          /* Gold — explicit token for dark bg accents */
  --c-cta:       #2C1810;          /* Espresso — WhatsApp CTA fill on light bg */
  --c-rule:      rgba(168, 148, 120, 0.22);  /* Amber 22% */
  --c-rule-dark: rgba(201, 173, 136, 0.20);  /* Gold 20% */

  /* ── Crystal tokens — canonical values per AUM_MASTER_REFERENCE (chakra order 01–07) ── */
  --cx-jasper:      #b02c24;
  --cx-carnelian:   #d16b34;
  --cx-citrine:     #e8cf5b;
  --cx-citrine-text: #e8cf5b;   /* matches --cx-citrine — user prefers pure yellow */
  --cx-aventurine:  #35784a;
  --cx-sodalite:    #1d4590;
  --cx-amethyst:    #692a6e;
  --cx-quartz:      #5c6670;

  /* ── Typography tokens ── */
  /* CRITICAL: The site has a font variable name split across two page groups. */
  /* 7 product pages use --ff-body / --ff-display. */
  /* 4 non-product pages use --f-body / --f-display. */
  /* Both names are defined here, aliased to the same value. */
  --ff-display: 'Instrument Serif', 'Georgia', 'Times New Roman', serif;
  --ff-body:    'Inter', Georgia, sans-serif;
  --f-display:  var(--ff-display);  /* alias: coleccion, contacto, nosotros, index */
  --f-body:     var(--ff-body);     /* alias: coleccion, contacto, nosotros, index */

  /* ── Spacing tokens ── */
  --gap-section:   clamp(72px, 10vw, 128px);
  --gap-container: clamp(24px, 6vw, 80px);
  --mw:  1280px;   /* used by product pages */
  --max-w: 1280px; /* used by non-product pages */

  /* ── Nav height tokens (measured from live DOM — nav.css padding 28px × 2 + nav__links 26px) ──
     Both product and editorial navs measure 82px: 28 + 26 (nav__links) + 28 = 82px.
     Scrolled state: 16 + 26 + 16 = 58px.
     --nav-h:    product nav full height  (measured: 82px)
     --nav-h-ed: editorial nav full height (measured: 82px)
     --nav-h-sm: any nav when .scrolled   (measured: 58px)
     UPDATE THESE if nav padding changes in nav.css. */
  --nav-h:    82px;
  --nav-h-ed: 82px;
  --nav-h-sm: 58px;

  /* ── Motion tokens ── */
  --ease:       cubic-bezier(0.16, 1, 0.3, 1);
  --ease-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-expo:  cubic-bezier(0.16, 1, 0.3, 1);

  /* ── Breakpoint reference (documentation only — CSS can't use vars in @media) ──
     320px  — ultra-narrow (Galaxy Fold, iPhone SE 1st gen)
     480px  — small mobile (stacked CTAs, single column)
     768px  — mobile (nav collapses, grids go 1-2 col)
     1024px — tablet (grids simplify, images go 16:9)
     1366px — small laptop / MacBook Air 11" / common Windows (grids tighten)
     1440px — standard laptop / MacBook Air 13"
     1920px — full HD desktop
     ---
     Height queries (for vh-constrained sections):
     max-height: 768px and min-width: 769px — short laptop (MacBook Air 11", iPad landscape)
     ---
     WCAG: 1440px at 200% zoom = 720px effective viewport. Must be usable.
  */

  /* ── Safe area tokens (for iOS notch / Android nav bar) ── */
  --safe-top:    env(safe-area-inset-top, 0px);
  --safe-right:  env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left:   env(safe-area-inset-left, 0px);
}