/* ==========================================================================
   VINTY WINES — DESIGN TOKENS
   Colors + Type foundations. Import this at the root of any Vinty surface.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800;900&family=Inter:wght@300;400;500;600;700&display=swap');

:root {
  /* ---------- BRAND COLORS ---------------------------------------------- */
  /* Primary red — used for CTAs, buttons, links, borders, focus. */
  --vinty-red:            #CE0203;
  --vinty-red-hover:      #A80102;   /* 10% darker for hover */
  --vinty-red-pressed:    #8A0102;   /* deeper press state */

  /* Warmer, deeper red — trust / assurance / premium moments.
     NEVER merge with --vinty-red. This is the "reveal" red. */
  --vinty-burgundy:       #890018;
  --vinty-burgundy-hover: #6C0013;

  /* Accent palette */
  --vinty-rose:           #DF5056;   /* soft pink-coral — used sparingly */
  --vinty-olive:          #958F31;   /* muted olive — producer / varietal tags */
  --vinty-yellow:         #FCD003;   /* mustard yellow — highlights / flash sale (from site templates) */

  /* ---------- NEUTRALS -------------------------------------------------- */
  --vinty-black:          #0A0A0A;   /* true brand black (logo-grade) */
  --vinty-ink:            #1A1A1A;   /* body text */
  --vinty-graphite:       #3A3A3A;   /* secondary text */
  --vinty-slate:          #6B6B6B;   /* tertiary / meta */
  --vinty-mute:           #9A9A9A;   /* disabled / placeholder */
  --vinty-hairline:       #E5E5E5;   /* borders, dividers */
  --vinty-wash:           #F2F1ED;   /* warm off-white surface (from palette card) */
  --vinty-paper:          #FAFAF8;   /* base page surface */
  --vinty-white:          #FFFFFF;

  /* ---------- SEMANTIC -------------------------------------------------- */
  --fg-1:                 var(--vinty-ink);
  --fg-2:                 var(--vinty-graphite);
  --fg-3:                 var(--vinty-slate);
  --fg-mute:              var(--vinty-mute);
  --fg-inverse:           var(--vinty-white);
  --fg-accent:            var(--vinty-red);
  --fg-assurance:         var(--vinty-burgundy);

  --bg-page:              var(--vinty-paper);
  --bg-surface:           var(--vinty-white);
  --bg-wash:              var(--vinty-wash);
  --bg-ink:               var(--vinty-black);
  --bg-accent:            var(--vinty-red);
  --bg-assurance:         var(--vinty-burgundy);

  --border-default:       var(--vinty-hairline);
  --border-strong:        var(--vinty-ink);
  --border-accent:        var(--vinty-red);

  /* Status (sparingly used; wine context rarely needs these) */
  --status-success:       #2F7D32;
  --status-warning:       var(--vinty-yellow);
  --status-error:         var(--vinty-red);

  /* ---------- TYPOGRAPHY ------------------------------------------------ */
  /* Two families ONLY. Montserrat for action/emphasis. Inter for body. */
  --font-action:  'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  --font-body:    'Inter', 'Helvetica Neue', Arial, sans-serif;

  /* Type scale */
  --text-2xs:     11px;
  --text-xs:      12px;
  --text-sm:      14px;
  --text-base:    16px;
  --text-lg:      18px;
  --text-xl:      22px;
  --text-2xl:     28px;
  --text-3xl:     36px;
  --text-4xl:     48px;
  --text-5xl:     64px;
  --text-6xl:     88px;

  --leading-tight:   1.05;
  --leading-snug:    1.2;
  --leading-normal:  1.5;
  --leading-loose:   1.65;

  --tracking-tight:   -0.02em;
  --tracking-normal:  0;
  --tracking-wide:    0.06em;   /* 1px on 16px */
  --tracking-button:  1px;       /* absolute — matches spec */
  --tracking-eyebrow: 0.12em;    /* small uppercase labels */

  /* ---------- SPACING --------------------------------------------------- */
  --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;

  /* ---------- RADII / BORDERS / SHADOWS --------------------------------- */
  /* Vinty aesthetic is confident, high-contrast, mostly squared.
     Small radii only. No pillowy cards. */
  --radius-none:  0;
  --radius-xs:    2px;
  --radius-sm:    4px;
  --radius-md:    6px;
  --radius-pill:  999px;

  --border-width-hair:   1px;
  --border-width-bold:   2px;

  /* Shadows — restrained. Used on hover for product cards. */
  --shadow-xs:  0 1px 2px rgba(10,10,10,0.06);
  --shadow-sm:  0 2px 8px rgba(10,10,10,0.06);
  --shadow-md:  0 8px 24px rgba(10,10,10,0.08);
  --shadow-lg:  0 20px 48px rgba(10,10,10,0.12);
  --shadow-focus: 0 0 0 3px rgba(206,2,3,0.25);

  /* ---------- MOTION ---------------------------------------------------- */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:    120ms;
  --dur-base:    180ms;
  --dur-slow:    280ms;
}

/* ==========================================================================
   SEMANTIC TYPE STYLES
   Apply classes or use these as references in component CSS.
   ========================================================================== */

html, body { font-family: var(--font-body); color: var(--fg-1); background: var(--bg-page); }
body { font-size: var(--text-base); line-height: var(--leading-normal); -webkit-font-smoothing: antialiased; }

/* Display / headlines — Montserrat, heavy, tight tracking */
.h-display {
  font-family: var(--font-action);
  font-weight: 900;
  font-size: var(--text-6xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
  text-transform: uppercase;
}
.h1 {
  font-family: var(--font-action);
  font-weight: 800;
  font-size: var(--text-4xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
  text-transform: uppercase;
}
.h2 {
  font-family: var(--font-action);
  font-weight: 800;
  font-size: var(--text-3xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
  text-transform: uppercase;
}
.h3 {
  font-family: var(--font-action);
  font-weight: 700;
  font-size: var(--text-2xl);
  line-height: var(--leading-snug);
  color: var(--fg-1);
}
.h4 {
  font-family: var(--font-action);
  font-weight: 700;
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  color: var(--fg-1);
}

/* Eyebrow — tiny uppercase label, red or burgundy */
.eyebrow {
  font-family: var(--font-action);
  font-weight: 700;
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--vinty-red);
}

/* Body — Inter */
.body-lg {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  line-height: var(--leading-normal);
  color: var(--fg-1);
}
.body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--fg-1);
}
.body-sm {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--fg-2);
}
.caption {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
  color: var(--fg-3);
}

/* Action label — THE canonical button text style. Always 14/700/1px/UPPER. */
.action {
  font-family: var(--font-action);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 1px;
  text-transform: uppercase;
  line-height: 1;
}

/* Price — tabular, Montserrat, heavy */
.price {
  font-family: var(--font-action);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}