/* ==========================================================================
   MATA Shop — Design tokens
   Single source of truth for all colors, fonts, spacing, radii and shadows.
   Tweak a value here and it propagates everywhere. Extracted from the
   Claude Design "Design System" frame (see _design/tokens.md).
   ========================================================================== */

:root {
  /* --- Colors --- */
  --color-primary:        #FFD60A; /* yellow — header, footer, trust strip, CTAs */
  --color-primary-dark:   #E8C800; /* yellow borders / header bottom / hover */
  --color-text:           #1A1714; /* headings, body, nav, dark buttons */
  --color-text-secondary: #4A4238; /* paragraphs, descriptions */
  --color-text-muted:     #8A7F6B; /* labels, meta, breadcrumbs, overlines */
  --color-placeholder:    #C0B8AC; /* input placeholders */

  --color-bg:             #FFFFFF; /* homepage / product page background */
  --color-surface:        #F4F1EB; /* cart & checkout page bg, prefilled field */
  --color-surface-cream:  #FFF7D6; /* O MATI section, payment card, active thumb */
  --color-surface-subtle: #FAFAF8; /* form fields, table headers, qty stepper */

  --color-border:         #F0EBDF; /* dividers, subtle borders */
  --color-border-medium:  #EBE6D6; /* card outer borders */
  --color-border-input:   #E0DAD0; /* form field borders */

  /* --- Typography --- */
  --font-heading: 'Fredoka', system-ui, -apple-system, sans-serif; /* 500 600 700 */
  --font-body:    'DM Sans', system-ui, -apple-system, sans-serif;  /* 400 500 600 700 */

  /* --- Radii --- */
  --radius-pill:   999px; /* buttons, chips, size selectors, qty steppers, badges */
  --radius-xl:      24px; /* large product image (desktop) */
  --radius-lg:      20px; /* section cards */
  --radius-lg-mob:  18px; /* mobile cards */
  --radius-md:      16px; /* trust strip, payment card */
  --radius-sm:      14px; /* small / mobile cards */
  --radius-input:   12px; /* desktop inputs */
  --radius-input-mob: 10px; /* mobile inputs */
  --radius-thumb:    8px; /* cart thumbnail */

  /* --- Shadows --- */
  --shadow-card:        0 2px 12px rgba(0,0,0,0.05);
  --shadow-card-mobile: 0 2px 10px rgba(0,0,0,0.05);
  --shadow-media:       0 12px 32px rgba(0,0,0,0.18);

  /* Hard-offset button shadows — brand signature. STATIC (no hover transform). */
  --shadow-btn-yellow:  0 4px 0 #1A1714;
  --shadow-btn-yellow-lg: 0 5px 0 #1A1714;
  --shadow-btn-dark:    0 4px 0 #FFD60A;
  --shadow-btn-white:   0 4px 0 #FFFFFF;
  --shadow-btn-hero:    0 5px 0 #1A1714, 0 14px 28px rgba(0,0,0,0.3);

  /* Product image drop-shadow (filter) */
  --shadow-product-img: drop-shadow(0 24px 32px rgba(0,0,0,0.18));
  --shadow-product-sm:  drop-shadow(0 14px 22px rgba(0,0,0,0.18));

  /* --- Layout --- */
  --page-max:    1440px; /* design frame width */
  --content-max: 1312px; /* 1440 - 2*64 horizontal padding */
  --gutter:        64px; /* desktop horizontal padding */
  --gutter-mobile: 20px; /* mobile horizontal padding */

  /* --- Motion (subtle; hard-offset buttons never animate) --- */
  --transition: 150ms ease;
}