/* =========================================================
   HARDYN — Foundations: Colors + Typography
   Brand:   HARDYN Fitness (Nova Friburgo, RJ — Brazil)
   Voice:   Energetic, motivational, feminine, addresses
            the customer as "queen / musa fitness".
   ========================================================= */

/* --------- Stölzl: brand wordmark/UI typeface ----------- */
@font-face {
  font-family: "Stolzl";
  src: url("./fonts/Stolzl-Thin.ttf") format("truetype");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Stolzl";
  src: url("./fonts/Stolzl-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Stolzl";
  src: url("./fonts/Stolzl-Book.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Stolzl";
  src: url("./fonts/Stolzl-Regular.ttf") format("truetype");
  font-weight: 450;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Stolzl";
  src: url("./fonts/Stolzl-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Stolzl";
  src: url("./fonts/Stolzl-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---------- Brand palette ----------
     HARDYN follows a 60 / 30 / 10 rule:
       60% — black + grayscale (dominant, structural)
       30% — light blue (supporting fields, badges, surfaces)
       10% — coral orange (accents, CTAs, the crown mark)
     Sampled from the official "Fale com a gente" comm.       */
  --brand-ink:       #000000;   /* primary black — wordmark, body, icon mark */
  --brand-paper:     #FFFFFF;   /* primary white — canvas */

  --brand-orange:        #FF9866;   /* coral orange — accent / 10% */
  --brand-orange-soft:   #FFD2BC;   /* tint */
  --brand-orange-deep:   #E6713A;   /* shade — pressed / focus */

  --brand-blue:          #C2EAF2;   /* pale icy blue — support / 30% */
  --brand-blue-soft:     #E4F4F8;   /* tint */
  --brand-blue-deep:     #8ECBD7;   /* shade */

  --brand-blush:     #F4E6DD;   /* legacy warm neutral — deprecated */
  --brand-sand:      #E9DFD3;   /* legacy warm neutral — deprecated */
  --brand-gold:      #B89766;   /* legacy champagne — deprecated */

  /* ---------- Neutral ramp ---------- */
  --ink-100: #000000;
  --ink-200: #1A1A1A;
  --ink-300: #3D3D3D;
  --ink-400: #6B6B6B;
  --ink-500: #9C9C9C;
  --ink-600: #C8C8C8;
  --ink-700: #E5E5E5;
  --ink-800: #F2F2F2;
  --ink-900: #FAFAFA;

  /* ---------- Semantic colors ---------- */
  --fg-1: var(--ink-100);          /* primary text */
  --fg-2: var(--ink-300);          /* secondary text */
  --fg-3: var(--ink-400);          /* tertiary / captions */
  --fg-inverse: var(--brand-paper);

  --bg-1: var(--brand-paper);      /* primary canvas */
  --bg-2: var(--ink-900);          /* page tint */
  --bg-3: var(--ink-800);          /* card raised */
  --bg-inverse: var(--brand-ink);

  --line-1: var(--ink-700);        /* hairline borders */
  --line-2: var(--ink-600);        /* stronger dividers */
  --line-strong: var(--ink-100);   /* editorial keylines */

  --accent: var(--brand-orange);
  --accent-fg: var(--brand-ink);
  --accent-soft: var(--brand-orange-soft);
  --accent-deep: var(--brand-orange-deep);

  --support: var(--brand-blue);
  --support-soft: var(--brand-blue-soft);
  --support-deep: var(--brand-blue-deep);

  --success: #2E7D5B;
  --warning: var(--brand-orange-deep);
  --danger:  #C2261B;
  --sale:    var(--brand-orange);

  /* ---------- Type stacks ---------- */
  --font-display: "Stolzl", "Inter Tight", "Helvetica Neue", Arial, sans-serif;
  --font-ui:      "Stolzl", "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-body:    "Stolzl", "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-mono:    ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* ---------- Spacing scale (4pt) ---------- */
  --space-0:  0;
  --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 ---------- */
  /* HARDYN garments and packaging skew bold/structural — radii
     are subtle. Pills are reserved for primary CTAs/tags. */
  --radius-0: 0;
  --radius-1: 2px;
  --radius-2: 4px;
  --radius-3: 8px;
  --radius-4: 12px;
  --radius-pill: 999px;

  /* ---------- Shadows ---------- */
  --shadow-1: 0 1px 2px rgba(10, 10, 10, 0.06),
              0 1px 1px rgba(10, 10, 10, 0.04);
  --shadow-2: 0 4px 16px rgba(10, 10, 10, 0.08),
              0 1px 2px rgba(10, 10, 10, 0.04);
  --shadow-3: 0 16px 40px rgba(10, 10, 10, 0.14);
  --shadow-accent: 0 8px 24px rgba(255, 152, 102, 0.35);

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 120ms;
  --dur-base: 220ms;
  --dur-slow: 420ms;

  /* ---------- Layout ---------- */
  --container-max: 1440px;
  --container-pad: clamp(20px, 4vw, 64px);
}

/* =========================================================
   Semantic typography
   Stölzl in all-caps + tight tracking is the HARDYN
   "voice" for headlines. Body sets in Book/Regular at
   normal tracking, sentence case.
   ========================================================= */

html, body { font-family: var(--font-body); color: var(--fg-1); background: var(--bg-1); }

.h-display, h1.display {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(56px, 8vw, 128px);
  line-height: 0.92;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--fg-1);
}

h1, .h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(40px, 5vw, 72px);
  line-height: 0.96;
  letter-spacing: -0.015em;
  text-transform: uppercase;
}

h2, .h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(28px, 3.2vw, 44px);
  line-height: 1.02;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

h3, .h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 22px;
  line-height: 1.15;
  letter-spacing: 0;
  text-transform: uppercase;
}

h4, .h4 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.2;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.eyebrow {
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-2);
}

p, .body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.55;
  letter-spacing: 0;
  color: var(--fg-1);
  text-wrap: pretty;
}

.body-lg {
  font-size: 18px;
  line-height: 1.55;
}

.body-sm, small {
  font-size: 13px;
  line-height: 1.45;
  color: var(--fg-2);
}

.caption {
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-3);
}

.price {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 18px;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}

.price-strike {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 13px;
  color: var(--fg-3);
  text-decoration: line-through;
}

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

a { color: inherit; text-decoration: none; }
a.link { border-bottom: 1px solid currentColor; padding-bottom: 1px; }