/* ============================================================
   HDS — Hi Design Studio
   colors_and_type.css — design tokens (color + type)
   ------------------------------------------------------------
   Reformas · Home staging · Interiorismo — Barcelona
   ------------------------------------------------------------
   Values below are the REAL brand system, sourced from the
   official palette sheet + logo + site screenshots the studio
   provided. Type is Satoshi (self-hosted). Accent is "mostaza".
   ============================================================ */

/* ---- Self-hosted brand font: Satoshi (variable) ---- */
@font-face {
  font-family: 'Satoshi';
  src: url('fonts/Satoshi-Variable.ttf') format('truetype');
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Satoshi';
  src: url('fonts/Satoshi-VariableItalic.ttf') format('truetype');
  font-weight: 300 900;
  font-style: italic;
  font-display: swap;
}

:root {
  /* =========================================================
     CORE COLOR  — official HDS palette
     80% cream + black · 15% charcoal · 5% mustard
     ========================================================= */

  /* Principales */
  --mostaza:      #E5B100;  /* ACCENT — links, buttons, logo dot, lines, checks, tags */
  --carbon:       #2A2A2A;  /* dark blocks: contacto, card backs, footer */
  --negro:        #1A1A1A;  /* primary text on light */
  --crema:        #F5F4F1;  /* general page background / card front */
  --blanco:       #FFFFFF;  /* text on charcoal, card fills */

  /* Secundarios */
  --carbon-soft:  #3A3A3A;  /* tags / separators inside dark zones */
  --gris:         #555555;  /* secondary text, subtitles */
  --linea:        rgba(0,0,0,.10);   /* soft dividers on light */
  --linea-dark:   rgba(255,255,255,.14); /* dividers on charcoal */

  /* Derived (kept minimal & on-brand) */
  --mostaza-deep: #C99700;  /* mustard hover/press */
  --mostaza-tint: #F7EFD2;  /* faint mustard wash (selection / highlight) */
  --panel:        #ECE9E2;  /* subtle warm greige band (process / pro sections) */
  --crema-2:      #FBFAF8;  /* lifted card front */
  --whatsapp:     #25D366;  /* floating WhatsApp affordance (brand-external) */

  /* ---------------------------------------------------------
     SEMANTIC ROLES
     --------------------------------------------------------- */
  --bg:           var(--crema);
  --bg-raised:    var(--crema-2);
  --bg-panel:     var(--panel);
  --bg-inverse:   var(--carbon);

  --fg:           var(--negro);    /* headings + primary text */
  --fg-2:         var(--gris);     /* body / secondary */
  --fg-3:         #8A8A86;         /* captions / metadata */
  --fg-on-dark:   #FFFFFF;
  --fg-2-on-dark: #B9B7B1;

  --accent:       var(--mostaza);
  --accent-hover: var(--mostaza-deep);
  --on-accent:    var(--negro);    /* mustard buttons carry DARK text */
  --border:       var(--linea);
  --border-strong:#D9D6CE;

  --success:      #3F8F4F;
  --danger:       #B23A2E;
  --focus-ring:   rgba(229,177,0,.45);

  /* ---------------------------------------------------------
     TYPE — Satoshi for everything (heavy for display)
     --------------------------------------------------------- */
  --font-display: 'Satoshi', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-sans:    'Satoshi', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-mono:    ui-monospace, 'SF Mono', Menlo, monospace;

  /* Type scale (web canvas; fluid) */
  --fs-display:   clamp(3rem, 1.1rem + 7.4vw, 6.5rem);   /* hero H1 — huge & heavy */
  --fs-h1:        clamp(2.4rem, 1.4rem + 3.8vw, 4.25rem);
  --fs-h2:        clamp(1.9rem, 1.3rem + 2.4vw, 3rem);
  --fs-h3:        clamp(1.3rem, 1.1rem + 0.8vw, 1.625rem);
  --fs-h4:        1.125rem;
  --fs-lead:      clamp(1.0625rem, 1rem + 0.45vw, 1.3125rem);
  --fs-body:      1.0625rem;   /* 17px */
  --fs-small:     0.9375rem;   /* 15px */
  --fs-eyebrow:   0.75rem;     /* 12px caps */
  --fs-caption:   0.8125rem;
  --fs-numeral:   clamp(1.75rem, 1.1rem + 2.4vw, 2.75rem);

  --lh-tight:     0.98;
  --lh-snug:      1.06;
  --lh-body:      1.6;

  --ls-display:   -0.03em;   /* tight, heavy grotesque */
  --ls-eyebrow:   0.22em;
  --ls-label:     0.02em;

  /* Radii — rounded & friendly (matches the real site) */
  --r-sm:   8px;
  --r-md:   16px;   /* cards */
  --r-lg:   24px;   /* large images / hero cards */
  --r-pill: 999px;  /* buttons, chips, lang switch */

  /* Elevation — soft, neutral */
  --shadow-card:  0 10px 30px -14px rgba(26,26,26,.16);
  --shadow-float: 0 18px 44px -18px rgba(26,26,26,.26);

  /* Spacing base = 8px */
  --space: 8px;
}

/* ============================================================
   SEMANTIC ELEMENT STYLES  (opt-in helpers)
   ============================================================ */

.hds-display {
  font-family: var(--font-display); font-weight: 900;
  font-size: var(--fs-display); line-height: var(--lh-tight);
  letter-spacing: var(--ls-display); color: var(--fg);
}
h1, .hds-h1 {
  font-family: var(--font-display); font-weight: 900;
  font-size: var(--fs-h1); line-height: var(--lh-snug);
  letter-spacing: var(--ls-display); color: var(--fg); margin: 0;
}
h2, .hds-h2 {
  font-family: var(--font-display); font-weight: 800;
  font-size: var(--fs-h2); line-height: 1.04;
  letter-spacing: -0.025em; color: var(--fg); margin: 0;
}
h3, .hds-h3 {
  font-family: var(--font-sans); font-weight: 700;
  font-size: var(--fs-h3); line-height: 1.15;
  letter-spacing: -0.015em; color: var(--fg); margin: 0;
}
h4, .hds-h4 {
  font-family: var(--font-sans); font-weight: 700;
  font-size: var(--fs-h4); line-height: 1.3; color: var(--fg); margin: 0;
}
.hds-eyebrow {
  font-family: var(--font-sans); font-weight: 700;
  font-size: var(--fs-eyebrow); letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase; color: var(--gris);
  display: inline-flex; align-items: center; gap: 14px;
}
.hds-eyebrow::before {  /* mustard lead dash */
  content: ""; width: 26px; height: 2px; background: var(--mostaza);
}
.hds-lead {
  font-family: var(--font-sans); font-weight: 400;
  font-size: var(--fs-lead); line-height: 1.5; color: var(--fg-2);
}
p, .hds-body {
  font-family: var(--font-sans); font-weight: 400;
  font-size: var(--fs-body); line-height: var(--lh-body); color: var(--fg-2);
}
.hds-small   { font-family: var(--font-sans); font-size: var(--fs-small); line-height: 1.5; color: var(--fg-2); }
.hds-caption { font-family: var(--font-sans); font-size: var(--fs-caption); color: var(--fg-3); letter-spacing: var(--ls-label); }

.hds-numeral {
  font-family: var(--font-sans); font-weight: 800;
  font-size: var(--fs-numeral); font-variant-numeric: tabular-nums;
  letter-spacing: 0; color: var(--mostaza); line-height: 1;
}

/* Mustard underline accent — the H1 "Reformas" treatment */
.hds-underline {
  background-image: linear-gradient(var(--mostaza), var(--mostaza));
  background-repeat: no-repeat;
  background-position: 0 88%;
  background-size: 100% 0.18em;
}

/* Pill button + arrow CTA */
.hds-btn {
  font-family: var(--font-sans); font-weight: 700; font-size: 15px;
  border: 0; border-radius: var(--r-pill); padding: 14px 26px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px; text-decoration: none;
  background: var(--mostaza); color: var(--on-accent);
  transition: background .25s, transform .12s;
}
.hds-btn:hover { background: var(--mostaza-deep); }
.hds-btn:active { transform: translateY(1px); }
.hds-link {
  font-family: var(--font-sans); font-weight: 700; color: var(--fg);
  text-decoration: none; display: inline-flex; align-items: center; gap: 0.5em;
}
.hds-link .arrow { color: var(--mostaza); transition: transform .35s cubic-bezier(.2,.7,.2,1); }
.hds-link:hover .arrow { transform: translateX(4px); }