/* ============================================================
   VENDRA — Live Shopping Agency
   Foundations: color + type tokens
   ------------------------------------------------------------
   Fonts: Display = "Avenir Next Cyr" (self-hosted from /fonts, see @font-face
   below); Body = "Montserrat" (Google Fonts CDN). Avenir mid weights
   (Regular/Medium/DemiBold) are not yet supplied — those map to nearest face.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');

/* ---- Self-hosted brand display font: Avenir Next Cyr ----
   The real brand headline/logo family, now self-hosted. Bold (700) drives
   headlines; Light/UltraLight/Thin + their italics are available for refined
   display accents. Mid weights (400–600) are not supplied — requests for them
   resolve to the nearest available face (usually Bold). Body text stays on
   Montserrat. Drop AvenirNextCyr-Medium / -Demi in here if you obtain them. */
@font-face { font-family:'Avenir Next Cyr'; src:url('fonts/AvenirNextCyr-Thin.ttf') format('truetype');        font-weight:100; font-style:normal; font-display:swap; }
@font-face { font-family:'Avenir Next Cyr'; src:url('fonts/AvenirNextCyr-ThinItalic.ttf') format('truetype');  font-weight:100; font-style:italic; font-display:swap; }
@font-face { font-family:'Avenir Next Cyr'; src:url('fonts/AvenirNextCyr-UltraLight.ttf') format('truetype');  font-weight:200; font-style:normal; font-display:swap; }
@font-face { font-family:'Avenir Next Cyr'; src:url('fonts/AvenirNextCyr-UltraLightIt.ttf') format('truetype');font-weight:200; font-style:italic; font-display:swap; }
@font-face { font-family:'Avenir Next Cyr'; src:url('fonts/AvenirNextCyr-Light.ttf') format('truetype');       font-weight:300; font-style:normal; font-display:swap; }
@font-face { font-family:'Avenir Next Cyr'; src:url('fonts/AvenirNextCyr-LightItalic.ttf') format('truetype'); font-weight:300; font-style:italic; font-display:swap; }
@font-face { font-family:'Avenir Next Cyr'; src:url('fonts/AvenirNextCyr-Bold.ttf') format('truetype');        font-weight:700; font-style:normal; font-display:swap; }

:root {
  /* ---- Brand palette (from brand board) ---- */
  --vendra-cream:    #F6F4F0; /* canvas / page background          */
  --vendra-sand:     #E6E1DC; /* secondary surface / dividers      */
  --vendra-slate:    #6B6B76; /* muted grey — secondary text       */
  --vendra-ink:      #0F111A; /* near-black — primary text & dark UI*/
  --vendra-pink:     #E91E63; /* primary accent — "LIVE" raspberry */
  --vendra-purple:   #8A2BE2; /* secondary accent — violet         */

  /* Signature gradient (pink → purple), 118° to echo the V mark */
  --vendra-gradient: linear-gradient(118deg, #E91E63 0%, #8A2BE2 100%); /* @kind color */
  --vendra-gradient-soft: linear-gradient(118deg, rgba(233,30,99,0.12) 0%, rgba(138,43,226,0.12) 100%); /* @kind color */

  /* ---- Semantic colors ---- */
  --bg:            var(--vendra-cream);
  --surface:       #FFFFFF;
  --surface-sand:  var(--vendra-sand);
  --surface-ink:   var(--vendra-ink);

  --fg1:           var(--vendra-ink);   /* primary text            */
  --fg2:           var(--vendra-slate); /* secondary / muted text  */
  --fg-on-dark:    #F6F4F0;             /* text on ink surfaces    */
  --fg-on-dark-2:  rgba(246,244,240,0.62);

  --accent:        var(--vendra-pink);
  --accent-2:      var(--vendra-purple);
  --accent-fg:     #FFFFFF;

  --border:        rgba(15,17,26,0.10);
  --border-strong: rgba(15,17,26,0.18);
  --border-on-dark:rgba(246,244,240,0.14);

  /* ---- Type families ---- */
  --font-display: 'Avenir Next Cyr', 'Avenir Next', 'Segoe UI', system-ui, sans-serif;
  --font-body:    'Montserrat', system-ui, sans-serif;

  /* ---- Type scale (1.25 major-third-ish, tuned) ---- */
  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-md:   18px;
  --text-lg:   22px;
  --text-xl:   28px;
  --text-2xl:  36px;
  --text-3xl:  48px;
  --text-4xl:  64px;
  --text-5xl:  84px;

  /* ---- Tracking ---- */
  --track-tight:  -0.02em;
  --track-normal: 0; /* @kind other */
  --track-wide:   0.08em;
  --track-eyebrow:0.28em; /* the wide-spaced "LIVE SHOPPING AGENCY" look */

  /* ---- Spacing (8pt base) ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10:128px;

  /* ---- Radii ---- */
  --radius-sm:  6px;
  --radius-md:  12px;
  --radius-lg:  20px;
  --radius-xl:  28px;
  --radius-pill:999px;
  --radius-app: 22px; /* iOS-style app icon squircle from board */

  /* ---- Shadows (soft, premium, low-contrast) ---- */
  --shadow-sm: 0 1px 2px rgba(15,17,26,0.06), 0 1px 3px rgba(15,17,26,0.05);
  --shadow-md: 0 4px 14px rgba(15,17,26,0.08), 0 2px 6px rgba(15,17,26,0.05);
  --shadow-lg: 0 18px 50px rgba(15,17,26,0.14), 0 6px 18px rgba(15,17,26,0.08);
  --shadow-accent: 0 14px 40px rgba(233,30,99,0.30);
}

/* ============================================================
   Semantic typographic roles
   ============================================================ */

.vendra-eyebrow {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-xs);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--accent);
}

.vendra-display {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-5xl);
  line-height: 1.02;
  letter-spacing: var(--track-tight);
  color: var(--fg1);
}

h1, .vendra-h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-4xl);
  line-height: 1.05;
  letter-spacing: var(--track-tight);
  color: var(--fg1);
}

h2, .vendra-h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-2xl);
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--fg1);
}

h3, .vendra-h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-xl);
  line-height: 1.2;
  color: var(--fg1);
}

.vendra-lead {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-lg);
  line-height: 1.5;
  color: var(--fg2);
}

p, .vendra-body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-base);
  line-height: 1.62;
  color: var(--fg1);
}

.vendra-small {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--fg2);
}

.vendra-caption {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-xs);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--fg2);
}

/* Gradient text helper — use sparingly, for emphasis words */
.vendra-gradient-text {
  background: var(--vendra-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}