/*
 * ============================================================
 * BESOL.COM.AR DESIGN TOKENS — Extracted for Reuse
 * Source: https://www.besol.com.ar/mujer/trajes-de-bano/bombacha/
 * Platform: TiendaNube (Nuvemshop)
 * ============================================================
 *
 * KEY DESIGN PRINCIPLES:
 * - Soft berry/purple accent on light gray
 * - Pink tones for CTAs and highlights
 * - Plus Jakarta Sans for everything
 * - Clean, minimal e-commerce layout
 * ============================================================
 */

:root {
  /* === BRAND COLORS === */
  --besol-accent: #582c4d;           /* Primary brand: dark berry/purple */
  --besol-accent-light: #dc7f9b;     /* Rose accent used in buttons */
  --besol-accent-pink: #f8a1c4;      /* Pink used in header bar */
  --besol-bg-main: #eeeeee;          /* Main background */
  --besol-bg-light: #fdf7f4;         /* Soft warm white */
  --besol-text-dark: #000000;        /* Primary text */
  --besol-text-medium: #444444;      /* Secondary text */
  --besol-text-muted: #5d5d5d;       /* Muted text */
  --besol-text-light: #696969;       /* Dimmed text */

  /* === SEMANTIC COLORS === */
  --besol-success: #4bb98c;
  --besol-danger: #dd7774;
  --besol-warning: #dc8f38;

  /* === BUTTON STYLES === */
  --besol-btn-primary-bg: #dc7f9b;          /* Rose - main CTA */
  --besol-btn-primary-text: #f5f5f5;        /* Near white */
  --besol-btn-primary-radius: 5px;
  --besol-btn-primary-padding: 11.2px 24px;
  --besol-btn-primary-font-size: 14.4px;
  
  --besol-btn-secondary-bg: #eeeeee;        /* Light gray */
  --besol-btn-secondary-text: #582c4d;      /* Berry */
  --besol-btn-secondary-radius: 4px;
  --besol-btn-secondary-padding: 8px;

  /* === HEADER === */
  --besol-header-bg: #eeeeee;
  --besol-header-text: #000000;
  --besol-header-height: 144px;
  --besol-adbar-bg: #000000;
  --besol-adbar-text: #f8a1c4;

  /* === FOOTER === */
  --besol-footer-bg: transparent;
  --besol-footer-text: #000000;
  --besol-footer-padding: 15px;

  /* === CARD / PRODUCT === */
  --besol-card-bg: #eeeeee;
  --besol-card-padding: 15px 10px;
  --besol-card-radius: 0px;           /* Besol uses square cards */

  /* === SHADOWS === */
  --besol-shadow-soft: rgba(0, 0, 0, 0.1) 0px 0px 5px 0px, rgba(0, 0, 0, 0.3) 0px 3px 9px 0px;
  --besol-shadow-medium: rgba(0, 0, 0, 0.2) 0px 1px 6px 0px;
  --besol-shadow-card: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px;
  --besol-shadow-input: rgba(0, 0, 0, 0.3) 0px 0px 6px 0px;

  /* === TYPOGRAPHY === */
  --besol-font-heading: "Plus Jakarta Sans", sans-serif;
  --besol-font-body: "Plus Jakarta Sans", sans-serif;
  --besol-font-weight-normal: 400;
  --besol-font-weight-medium: 500;
  --besol-font-weight-bold: 700;
  --besol-font-weight-black: 900;

  /* Heading Scale */
  --besol-h1: 34px;
  --besol-h2: 30px;
  --besol-h3: 26px;
  --besol-h4: 24px;
  --besol-h5: 22px;
  --besol-h6: 20px;

  /* Body Scale */
  --besol-font-large: 16px;
  --besol-font-big: 14px;
  --besol-font-base: 12px;
  --besol-font-medium: 11px;
  --besol-font-small: 10px;
  --besol-font-smallest: 8px;

  /* === SPACING SCALE === */
  --besol-space-xs: 4px;
  --besol-space-sm: 6px;
  --besol-space-md: 8px;
  --besol-space-base: 10px;
  --besol-space-lg: 12px;
  --besol-space-xl: 16px;
  --besol-space-2xl: 20px;
  --besol-space-3xl: 24px;
  --besol-space-4xl: 32px;

  /* === BORDER RADIUS === */
  --besol-radius-sm: 2px;
  --besol-radius-base: 4px;
  --besol-radius-md: 5px;
  --besol-radius-lg: 6px;
  --besol-radius-xl: 10px;
  --besol-radius-pill: 16px;
  --besol-radius-full: 50%;

  /* === OPACITY SCALE (from custom properties) === */
  --besol-opacity-5: #0000000D;
  --besol-opacity-8: #00000014;
  --besol-opacity-10: #0000001A;
  --besol-opacity-20: #00000033;
  --besol-opacity-30: #0000004D;
  --besol-opacity-40: #00000066;
  --besol-opacity-50: #00000080;
  --besol-opacity-60: #00000099;
  --besol-opacity-80: #000000CC;
  --besol-opacity-90: #000000E6;
}

/* ============================================================
 * PRODUCT IMAGE URLS (TiendaNube CDN)
 * Change 480-0 to 1024-0 in URL for larger versions
 * Pattern: https://acdn-us.mitiendanube.com/stores/005/213/325/products/{slug}-{size}-0.{ext}
 * ============================================================ */