/* ============================================================
   Elvaro — Global base layer
   Load order: tokens.css → base.css → components.css → elvaro.css
   ============================================================ */

/* ------------------------------------------------------------------ */
/* Box-sizing                                                           */
/* ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

/* ------------------------------------------------------------------ */
/* Element resets                                                       */
/* ------------------------------------------------------------------ */
* { margin: 0; padding: 0; }

ul, ol { list-style: none; }

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

input, button, textarea, select { font: inherit; }

/* Long word / URL overflow guard */
p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }

/* Remove default button chrome */
button { background: none; border: none; cursor: pointer; }

/* Remove default fieldset/legend chrome */
fieldset { border: none; }

/* Table */
table { border-collapse: collapse; border-spacing: 0; }

/* ------------------------------------------------------------------ */
/* HTML / Body                                                          */
/* ------------------------------------------------------------------ */
html {
  font-size: 16px;
  scroll-behavior: smooth;
  /* Always show scrollbar to prevent layout shift */
  overflow-y: scroll;
}

body {
  background: var(--bg);
  color: var(--fg-1);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  min-height: 100dvh;
}

body.elvaro-no-scroll { overflow: hidden; }

/* ------------------------------------------------------------------ */
/* Selection                                                            */
/* ------------------------------------------------------------------ */
::selection {
  background: var(--brand-yellow);
  color: var(--fg-on-yellow);
}

/* ------------------------------------------------------------------ */
/* Typography — semantic elements                                       */
/* ------------------------------------------------------------------ */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 800;
  color: var(--fg-1);
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-tight);
  text-wrap: balance;
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); line-height: var(--lh-snug); }
h3 { font-size: var(--fs-h3); line-height: var(--lh-snug); font-weight: 700; }
h4 { font-size: var(--fs-h4); line-height: var(--lh-snug); font-weight: 700; }
h5 { font-size: var(--fs-body-lg); line-height: var(--lh-snug); font-weight: 700; }
h6 { font-size: var(--fs-body);    line-height: var(--lh-normal); font-weight: 700; }

p { color: var(--fg-2); line-height: var(--lh-normal); }

a { color: inherit; text-decoration: none; }

code, pre, kbd, samp {
  font-family: var(--font-mono);
  font-size: 13px;
}

/* ------------------------------------------------------------------ */
/* Typography — utility classes                                         */
/* ------------------------------------------------------------------ */
.display-xl {
  font-family: var(--font-display);
  font-size: var(--fs-display-xl);
  font-weight: 800;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--fg-1);
  text-wrap: balance;
}

.display {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  font-weight: 800;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--fg-1);
  text-wrap: balance;
}

/* Heading size helpers (override element size without changing semantics) */
.h1 { font-size: var(--fs-h1); }
.h2 { font-size: var(--fs-h2); }
.h3 { font-size: var(--fs-h3); }
.h4 { font-size: var(--fs-h4); }

.body-lg  { font-size: var(--fs-body-lg);  line-height: var(--lh-relaxed); color: var(--fg-2); }
.body     { font-size: var(--fs-body);     line-height: var(--lh-normal);  color: var(--fg-2); }
.body-sm  { font-size: var(--fs-body-sm);  line-height: var(--lh-normal);  color: var(--fg-2); }
.caption  { font-size: var(--fs-caption);  line-height: var(--lh-normal);  color: var(--fg-3); }
.overline {
  font-size: var(--fs-overline);
  line-height: var(--lh-normal);
  letter-spacing: var(--ls-overline);
  text-transform: uppercase;
  font-weight: 600;
  color: var(--fg-3);
}

/* Foreground colour helpers */
.text-1 { color: var(--fg-1); }
.text-2 { color: var(--fg-2); }
.text-3 { color: var(--fg-3); }
.text-4 { color: var(--fg-4); }
.text-yellow { color: var(--brand-yellow); }
.text-gold   { color: var(--brand-gold-hi); }

/* Price — tabular figures */
.price {
  font-feature-settings: 'tnum';
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

/* Animated underline link */
.link {
  color: var(--fg-1);
  background-image: linear-gradient(var(--brand-yellow), var(--brand-yellow));
  background-size: 0% 1.5px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size var(--dur-base) var(--ease-emphasized);
}
.link:hover { background-size: 100% 1.5px; }

/* ------------------------------------------------------------------ */
/* Container                                                            */
/* ------------------------------------------------------------------ */
.elv-container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter-m);
}

@media (min-width: 640px) {
  .elv-container { padding-inline: var(--gutter-t); }
}

@media (min-width: 1280px) {
  .elv-container { padding-inline: var(--gutter-d); }
}

.elv-container--wide {
  max-width: var(--container-wide);
}

.elv-container--narrow {
  max-width: var(--container-narrow);
}

/* ------------------------------------------------------------------ */
/* Section spacing                                                      */
/* ------------------------------------------------------------------ */
.elv-section {
  padding-block: var(--sp-16);
}

@media (min-width: 640px) {
  .elv-section { padding-block: var(--sp-20); }
}

@media (min-width: 980px) {
  .elv-section { padding-block: var(--sp-24); }
}

.elv-section--sm  { padding-block: var(--sp-8); }
.elv-section--lg  { padding-block: var(--sp-32); }

/* ------------------------------------------------------------------ */
/* Layout utilities                                                     */
/* ------------------------------------------------------------------ */

/* Flex */
.elv-flex        { display: flex; }
.elv-flex-center { display: flex; align-items: center; justify-content: center; }
.elv-flex-between{ display: flex; align-items: center; justify-content: space-between; }
.elv-flex-col    { display: flex; flex-direction: column; }
.elv-flex-wrap   { flex-wrap: wrap; }
.elv-gap-2 { gap: var(--sp-2); }
.elv-gap-3 { gap: var(--sp-3); }
.elv-gap-4 { gap: var(--sp-4); }
.elv-gap-6 { gap: var(--sp-6); }
.elv-gap-8 { gap: var(--sp-8); }

/* Grid */
.elv-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-6); }
.elv-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-6); }
.elv-grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-6); }

@media (max-width: 899px) {
  .elv-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .elv-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 639px) {
  .elv-grid-4,
  .elv-grid-3,
  .elv-grid-2 { grid-template-columns: minmax(0, 1fr); }
}

/* ------------------------------------------------------------------ */
/* Spacing utilities (margin / padding top/bottom shortcuts)           */
/* ------------------------------------------------------------------ */
.mt-0 { margin-top: 0; }
.mt-2 { margin-top: var(--sp-2); }
.mt-4 { margin-top: var(--sp-4); }
.mt-6 { margin-top: var(--sp-6); }
.mt-8 { margin-top: var(--sp-8); }
.mb-0 { margin-bottom: 0; }
.mb-2 { margin-bottom: var(--sp-2); }
.mb-4 { margin-bottom: var(--sp-4); }
.mb-6 { margin-bottom: var(--sp-6); }
.mb-8 { margin-bottom: var(--sp-8); }

/* ------------------------------------------------------------------ */
/* Visibility                                                           */
/* ------------------------------------------------------------------ */
.elv-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

.elv-hidden { display: none !important; }

@media (max-width: 719px)  { .elv-hide-mobile  { display: none !important; } }
@media (min-width: 720px)  { .elv-hide-desktop { display: none !important; } }

/* ------------------------------------------------------------------ */
/* Focus visible — keyboard accessibility ring                         */
/* ------------------------------------------------------------------ */
:focus-visible {
  outline: 2px solid var(--brand-yellow);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* ------------------------------------------------------------------ */
/* Scrollbar styling (Webkit)                                          */
/* ------------------------------------------------------------------ */
::-webkit-scrollbar              { width: 6px; height: 6px; }
::-webkit-scrollbar-track        { background: var(--surface-1); }
::-webkit-scrollbar-thumb        { background: var(--surface-4); border-radius: var(--radius-pill); }
::-webkit-scrollbar-thumb:hover  { background: var(--fg-4); }