/* ── BERRO ART SHOP — DESIGN TOKENS ── */

/* Tipografías y espaciado — invariantes */
:root {
  --font-display: 'Cormorant Garant', serif;
  --font-mono:    'Space Mono', monospace;
  --line-weight:  0.5px;
  --spacing-sm:   16px;
  --spacing-md:   32px;
  --page-pad:     32px;
  --spacing-lg:   64px;
  --spacing-xl:   120px;
  --ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
  --header-h:     56px;
}

@media (max-width: 767px) {
  :root { --page-pad: 15px; }
}

/* ── TEMA LIGHT (default) ── */
:root,
[data-theme="light"] {
  --color-bg:          #f5f5f0;
  --color-ink:         #0a0a0a;
  --color-ink-dim:     rgba(10,10,10,0.55);
  --color-ink-faint:   rgba(0,0,0,0.12);
  --color-surface:     #ebebea;
  --color-ph:          #d8d8d3;
  --color-ph-stroke:   #b0b0aa;
  --color-shimmer:     rgba(0,0,0,0.15);
  --color-cursor:      #0a0a0a;
  --color-cursor-ring: rgba(0,0,0,0.5);
  --color-overlay-end: rgba(245,245,240,0.88);
  --color-cart-overlay: rgba(0,0,0,0.25);
}

/* ── TEMA DARK ── */
[data-theme="dark"] {
  --color-bg:          #080808;
  --color-ink:         #ffffff;
  --color-ink-dim:     rgba(255,255,255,0.5);
  --color-ink-faint:   rgba(255,255,255,0.12);
  --color-surface:     #0e0e0e;
  --color-ph:          #1a1a1a;
  --color-ph-stroke:   #2a2a2a;
  --color-shimmer:     rgba(255,255,255,0.4);
  --color-cursor:      #ffffff;
  --color-cursor-ring: rgba(255,255,255,0.5);
  --color-overlay-end: rgba(8,8,8,0.88);
  --color-cart-overlay: rgba(0,0,0,0.7);
}