/* ============================================================
   VOVO Design System — Colors & Typography
   Brand: Venezuelan gift brand — warm, artisanal, playful
   ============================================================ */

/* ---- Webfonts ---- */
@font-face {
  font-family: 'Public Sans';
  src: url('./fonts/PublicSans-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
}
@font-face {
  font-family: 'Public Sans';
  src: url('./fonts/PublicSans-Italic-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: italic;
}

:root {
  /* ============================================================
     COLOR TOKENS — Base Palette
     ============================================================ */

  /* Canvas / Neutrals */
  --color-canvas:        #F6F1E6;  /* warm cream — main background */
  --color-canvas-pure:   #FFFFFF;  /* pure white — product cards */
  --color-canvas-dark:   #EDE7D5;  /* slightly deeper cream — alternating sections */

  /* Brand Accents */
  --color-amber:         #FBAB40;  /* logo amber / mustard yellow — primary brand */
  --color-turquoise:     #1CC4D0;  /* logo turquoise / celeste — accent */
  --color-terracotta:    #C06644;  /* logo terracotta / warm rust */
  --color-purple:        #5C3D8F;  /* header / nav background */
  --color-purple-light:  #7B52B8;  /* hover state / lighter variant */
  --color-purple-dark:   #3D2666;  /* pressed / darker variant */

  /* UI Accent Colors */
  --color-lilac:         #C9A8E8;  /* vibrant lilac — section band */
  --color-lilac-deep:    #9B6DC8;  /* deeper lilac — secondary CTA */
  --color-yellow:        #F5C842;  /* mustard yellow — section band */
  --color-coral:         #F26A45;  /* warm coral orange — primary CTA */
  --color-mint:          #A8DDD4;  /* soft mint — decorative */
  --color-pink:          #F4A7B5;  /* soft pink — sticker / decorative */

  /* Text */
  --color-ink:           #1A1A1A;  /* near-black — primary text */
  --color-ink-mid:       #5C5C5C;  /* medium gray — secondary text */
  --color-ink-light:     #9A9A9A;  /* light gray — captions, metadata */
  --color-ink-on-dark:   #FFFFFF;  /* white text on dark/colored bg */

  /* ============================================================
     COLOR TOKENS — Semantic
     ============================================================ */
  --color-bg-page:       var(--color-canvas);
  --color-bg-card:       var(--color-canvas-pure);
  --color-bg-band-a:     var(--color-lilac);
  --color-bg-band-b:     var(--color-yellow);
  --color-bg-nav:        var(--color-canvas);

  --color-cta-primary:   var(--color-coral);
  --color-cta-secondary: var(--color-lilac-deep);
  --color-cta-text:      var(--color-canvas-pure);

  --color-fg-primary:    var(--color-ink);
  --color-fg-secondary:  var(--color-ink-mid);
  --color-fg-subtle:     var(--color-ink-light);

  --color-border:        #E0DAC8;
  --color-border-focus:  var(--color-coral);

  /* ============================================================
     TYPOGRAPHY TOKENS
     ============================================================ */

  /* Font families */
  --font-sans:    'Public Sans', system-ui, sans-serif;
  --font-display: 'Public Sans', system-ui, sans-serif; /* heavy weight for headlines */

  /* Font weights */
  --fw-light:     300;
  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;
  --fw-extrabold: 800;
  --fw-black:     900;

  /* Type scale (fluid-ish, desktop first) */
  --text-xs:    0.75rem;    /* 12px */
  --text-sm:    0.875rem;   /* 14px */
  --text-base:  1rem;       /* 16px */
  --text-md:    1.125rem;   /* 18px */
  --text-lg:    1.25rem;    /* 20px */
  --text-xl:    1.5rem;     /* 24px */
  --text-2xl:   2rem;       /* 32px */
  --text-3xl:   2.75rem;    /* 44px */
  --text-4xl:   3.5rem;     /* 56px */
  --text-5xl:   5rem;       /* 80px */

  /* Line heights */
  --lh-tight:   1.1;
  --lh-snug:    1.25;
  --lh-normal:  1.5;
  --lh-relaxed: 1.7;

  /* Letter spacing */
  --ls-tight:   -0.03em;
  --ls-normal:   0em;
  --ls-wide:     0.05em;
  --ls-wider:    0.1em;

  /* ============================================================
     SPACING TOKENS
     ============================================================ */
  --space-1:    4px;
  --space-2:    8px;
  --space-3:    12px;
  --space-4:    16px;
  --space-5:    20px;
  --space-6:    24px;
  --space-8:    32px;
  --space-10:   40px;
  --space-12:   48px;
  --space-16:   64px;
  --space-20:   80px;
  --space-24:   96px;
  --space-32:  128px;

  /* ============================================================
     BORDER RADIUS
     ============================================================ */
  --radius-sm:   6px;
  --radius-md:   12px;
  --radius-lg:   20px;
  --radius-xl:   32px;
  --radius-pill: 999px;

  /* ============================================================
     SHADOWS
     ============================================================ */
  --shadow-card:   0 2px 12px rgba(0,0,0,0.07);
  --shadow-raised: 0 6px 24px rgba(0,0,0,0.10);
  --shadow-float:  0 12px 40px rgba(0,0,0,0.14);

  /* ============================================================
     TRANSITIONS
     ============================================================ */
  --ease-out:    cubic-bezier(0.0, 0.0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --transition:  180ms var(--ease-out);
}

/* ============================================================
   SEMANTIC TYPE STYLES
   ============================================================ */

h1, .h1 {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: var(--fw-black);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--color-fg-primary);
}

h2, .h2 {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: var(--fw-extrabold);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  color: var(--color-fg-primary);
}

h3, .h3 {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  color: var(--color-fg-primary);
}

h4, .h4 {
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-normal);
  color: var(--color-fg-primary);
}

p, .body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--fw-regular);
  line-height: var(--lh-relaxed);
  color: var(--color-fg-secondary);
}

.body-sm {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--fw-regular);
  line-height: var(--lh-relaxed);
  color: var(--color-fg-secondary);
}

.caption {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--color-fg-subtle);
}

.label {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  color: var(--color-fg-primary);
}

.price {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--fw-bold);
  color: var(--color-ink);
}

/* ============================================================
   BASE RESET HELPERS
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  background: var(--color-bg-page);
  color: var(--color-fg-primary);
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }