/* =========================================================
   Vivenda — Colors & Type tokens
   Source of truth extracted from the Figma file
   "www.vivenda.es (English-US) by html.to.design"
   ========================================================= */

/* ---------- Fonts ---------- */
/* Krona One loaded locally from brand-supplied TTF.
   Lexend + Inter still pulled from Google Fonts — drop local files in fonts/
   and swap these @font-face rules when you have them. */
@font-face {
  font-family: "Krona One";
  src: url("fonts/KronaOne-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@import url("https://fonts.googleapis.com/css2?family=Krona+One&family=Lexend:wght@300;400;500;600&display=swap");

:root {
  /* ---------- Base palette ---------- */
  --viv-black:        rgb(0, 0, 0);          /* page/background, footer */
  --viv-ink:          rgb(30, 30, 30);       /* dark surfaces */
  --viv-charcoal:     rgb(51, 53, 53);       /* gradient end */
  --viv-slate:        rgb(46, 45, 44);       /* dialog background */
  --viv-graphite:     rgb(68, 68, 68);       /* muted surface */
  --viv-neutral-700:  rgb(85, 85, 85);
  --viv-neutral-500:  rgb(121, 121, 121);
  --viv-neutral-450:  rgb(122, 122, 122);    /* button :hover */
  --viv-neutral-300:  rgb(184, 184, 184);    /* disabled/quiet text */
  --viv-neutral-250:  rgb(178, 178, 178);    /* footer "BEST OF VIVENDA" label */
  --viv-neutral-150:  rgb(242, 242, 242);
  --viv-stone:        rgb(219, 213, 203);    /* warm off-white */
  --viv-white:        rgb(255, 255, 255);

  /* ---------- Brand accents ---------- */
  --viv-terracotta:       rgb(125, 89, 62);  /* primary brand accent */
  --viv-terracotta-hover: rgb(122, 122, 122);/* becomes grey on hover */
  --viv-olive:            rgb(196, 198, 127);/* CTA "accept" button */
  --viv-olive-dark:       rgb(152, 154, 69); /* olive hover / emphasis */

  /* ---------- Alphas ---------- */
  --viv-overlay-80:   rgba(0, 0, 0, 0.80);   /* hero dim */
  --viv-overlay-65:   rgba(0, 0, 0, 0.65);   /* image cutout */
  --viv-overlay-90:   rgba(0, 0, 0, 0.90);   /* page loader */
  --viv-shadow-dark:  rgba(0, 0, 0, 0.50);
  --viv-shadow-soft:  rgba(0, 0, 0, 0.25);
  --viv-glow-white:   rgba(255, 255, 255, 0.50);
  --viv-hairline:     rgba(255, 255, 255, 0.10);
  --viv-hairline-30:  rgba(255, 255, 255, 0.30);

  /* ---------- Semantic ---------- */
  --fg-1:            var(--viv-white);       /* primary text */
  --fg-2:            var(--viv-neutral-250); /* labels, quiet heads */
  --fg-3:            var(--viv-neutral-300); /* disabled/meta */
  --fg-accent:       var(--viv-terracotta);
  --fg-accent-warm:  var(--viv-olive);

  --bg-page:         var(--viv-black);
  --bg-elev-1:       var(--viv-ink);         /* dialog, card */
  --bg-elev-2:       var(--viv-slate);
  --bg-footer:       var(--viv-black);
  --bg-inverse:      var(--viv-white);

  --border-soft:     var(--viv-hairline);
  --border-dashed:   0.5px dashed var(--viv-white);

  /* ---------- Shadows ---------- */
  --shadow-text-drop:  10px 10px 3px 0 var(--viv-shadow-dark);
  --shadow-white-glow: 0 0 10px 0 var(--viv-glow-white);
  --shadow-dialog:     0 25px 50px -12px var(--viv-shadow-soft);

  /* ---------- Radii ---------- */
  --radius-xs:  2px;   /* section outer */
  --radius-sm:  3px;   /* buttons */
  --radius-md:  4px;   /* dialogs */
  --radius-lg:  5px;   /* dashed preview frames */

  /* ---------- Spacing scale ---------- */
  --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: 100px;

  /* ---------- Type: families ---------- */
  --font-display: "Krona One", system-ui, sans-serif;               /* editorial display — only 400 */
  --font-body:    "Lexend", system-ui, -apple-system, sans-serif;   /* body default — Lexend everywhere */
  --font-meta:    "Lexend", system-ui, sans-serif;                  /* micro-labels also Lexend */

  /* ---------- Type: roles ---------- */
  /* Hero display — "built to last", page loader */
  --type-display-xl-size:       80px;
  --type-display-xl-lh:         80px;
  --type-display-xl-weight:     400;
  --type-display-xl-tracking:   0;
  --type-display-xl-family:     var(--font-display);

  --type-display-lg-size:       94px;   /* cover/loader, seen 5× */
  --type-display-lg-lh:         1;
  --type-display-lg-family:     var(--font-display);

  /* Wordmark / lockup: 24/48 Krona One */
  --type-wordmark-size:   24px;
  --type-wordmark-lh:     48px;
  --type-wordmark-family: var(--font-display);

  /* Section / content heading */
  --type-h1-size:   36px;
  --type-h1-lh:     44px;
  --type-h1-weight: 400;
  --type-h1-family: var(--font-display);

  --type-h2-size:   32px;
  --type-h2-lh:     40px;
  --type-h2-weight: 400;
  --type-h2-family: var(--font-display);

  --type-h3-size:   24px;
  --type-h3-lh:     36px;
  --type-h3-weight: 400;
  --type-h3-family: var(--font-body);

  --type-eyebrow-size:   20px;   /* section eyebrows / pill labels */
  --type-eyebrow-lh:     28px;
  --type-eyebrow-weight: 600;
  --type-eyebrow-family: var(--font-body);

  /* Body */
  --type-body-lg-size:   18px;
  --type-body-lg-lh:     27px;
  --type-body-lg-weight: 300;
  --type-body-lg-family: var(--font-body);

  --type-body-size:   16px;
  --type-body-lh:     20px;
  --type-body-weight: 400;
  --type-body-family: var(--font-body);

  --type-body-sm-size:   15px;  /* buttons */
  --type-body-sm-lh:     15px;
  --type-body-sm-weight: 300;
  --type-body-sm-family: var(--font-body);

  --type-caption-size:   14px;
  --type-caption-lh:     20px;
  --type-caption-weight: 400;
  --type-caption-family: var(--font-body);

  /* Micro meta (Figma legends, micro UI) */
  --type-meta-size:   12px;
  --type-meta-lh:     100%;
  --type-meta-weight: 300;
  --type-meta-family: var(--font-meta);
}

/* ---------- Body default ---------- */
html, body {
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.6;
  color: var(--fg-1);
}

/* ---------- Display headings — Krona One ---------- */
h1, h2, .display {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: 0.015em;
  line-height: 1.15;
}

/* ---------- Semantic element styles ---------- */
.viv-display-xl,
.viv h1.display {
  font-family: var(--type-display-xl-family);
  font-size:   var(--type-display-xl-size);
  line-height: var(--type-display-xl-lh);
  color:       var(--fg-1);
  letter-spacing: var(--type-display-xl-tracking);
}

.viv-wordmark {
  font-family: var(--type-wordmark-family);
  font-size:   var(--type-wordmark-size);
  line-height: var(--type-wordmark-lh);
  color:       var(--fg-1);
  letter-spacing: 0;
}

.viv h1 { font: var(--type-h1-weight) var(--type-h1-size)/var(--type-h1-lh) var(--type-h1-family); color: var(--fg-1); }
.viv h2 { font: var(--type-h2-weight) var(--type-h2-size)/var(--type-h2-lh) var(--type-h2-family); color: var(--fg-1); }
.viv h3 { font: var(--type-h3-weight) var(--type-h3-size)/var(--type-h3-lh) var(--type-h3-family); color: var(--fg-1); }
.viv .eyebrow,
.viv .label { font: var(--type-eyebrow-weight) var(--type-eyebrow-size)/var(--type-eyebrow-lh) var(--type-eyebrow-family); color: var(--fg-2); letter-spacing: .04em; text-transform: uppercase; }
.viv p    { font: var(--type-body-lg-weight) var(--type-body-lg-size)/var(--type-body-lg-lh) var(--type-body-lg-family); color: var(--fg-1); }
.viv small,
.viv .caption { font: var(--type-caption-weight) var(--type-caption-size)/var(--type-caption-lh) var(--type-caption-family); color: var(--fg-1); }
.viv .meta    { font: var(--type-meta-weight) var(--type-meta-size)/var(--type-meta-lh) var(--type-meta-family); color: var(--fg-3); }

/* ---------- Primary button — terracotta fill, flips grey on hover ---------- */
.viv-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  height: 39px;
  padding: 12px 24px;
  border-radius: var(--radius-sm);
  background: var(--viv-terracotta);
  color: var(--fg-1);
  font: var(--type-body-sm-weight) var(--type-body-sm-size)/var(--type-body-sm-lh) var(--type-body-sm-family);
  border: 0;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 220ms ease-out, transform 160ms ease-out;
}
.viv-btn:hover     { background: var(--viv-terracotta-hover); }
.viv-btn:active    { transform: scale(0.985); }
.viv-btn--olive    { background: var(--viv-olive); color: var(--viv-black); }
.viv-btn--ghost    { background: transparent; border: 1px solid var(--viv-hairline-30); }

/* ---------- Underline link with terracotta underline on hover ---------- */
.viv-link {
  color: var(--fg-1);
  text-decoration: none;
  position: relative;
  padding-bottom: 3px;
}
.viv-link::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 3px;
  background: var(--viv-terracotta);
  opacity: 0;
  transition: opacity 200ms ease-out;
}
.viv-link:hover::after { opacity: 1; }