/*
 * Branded theme (XTR2) – design pages 6–8.
 * The design uses Pragmatica (Book / Bold / Black Oblique), which is a licensed
 * font. It's listed first so it takes over once an @font-face is added; until then
 * Archivo (italic, 400–900) is the closest free fallback.
 */

:root {
  --font-body: "Pragmatica", "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-heading: "Pragmatica", "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-style: italic;
  --text-transform: uppercase;

  /*
   * Background: the photo/line texture (a 2000px web copy of assets/bg.jpeg) under a dark fade.
   * The fade keeps the top almost black and lets the lines show faintly lower down, as in the
   * design. Raise the alpha values to fade the texture further, lower them to show more of it.
   */
  --bg-fade-top: rgba(4, 9, 13, 0.85);
  --bg-fade-bottom: rgba(8, 10, 13, 0.5);
  --panel-bg:
    linear-gradient(180deg, var(--bg-fade-top) 0%, var(--bg-fade-bottom) 100%),
    url("../bg-panel.jpg") 55% 50% / cover no-repeat,
    #04090d;
  --panel-radius: clamp(2rem, 8vw, 4rem);

  /* Red (label) and green (accent) are the supplied brand values; the rest were sampled from the PDF. */
  --text: #ffffff;
  --label: #ee0000;
  --accent: #3faf47;
  --accent-hover: #52c15a;
  --btn-text: #ffffff;
  --focus: #ffffff;
  --red-error: #ff6b61;

  /* Title */
  --title-size: clamp(1.5rem, 6.6vw, 2.9rem);
  --title-line-height: 1;
  --title-weight: 900;
  --title-tracking: -0.045em;
  --title-align: left;

  /* Questions */
  --step-size: clamp(0.7rem, 1.9vw, 0.85rem);
  --label-weight: 900;
  --label-tracking: -0.02em;
  --question-size: clamp(1.1rem, 4.2vw, 1.85rem);
  --question-weight: 400;
  --question-tracking: -0.045em;
  --lead-label-size: clamp(0.95rem, 3vw, 1.3rem);

  /* Inputs */
  --input-height: clamp(2.9rem, 8vw, 3.55rem);
  --input-size: clamp(1rem, 3.2vw, 1.5rem);
  --input-bg: #fefefe;
  --input-border: 0;
  --input-radius: 0.55rem;
  --input-text: #121216;
  --placeholder: #858585;

  /* Buttons */
  --btn-font: var(--font-heading);
  --btn-font-style: italic;
  --btn-weight: 900;
  --btn-size: clamp(1.15rem, 3.8vw, 1.7rem);
  --btn-tracking: -0.045em;
  --btn-transform: uppercase;
  --btn-padding: clamp(1rem, 3.4vw, 1.45rem) 1rem;
  --btn-radius: 0.65rem;

  /* Results */
  --results-title-size: clamp(3.25rem, 15vw, 6.5rem);
  --results-title-weight: 900;
  --results-label-size: clamp(1rem, 3.3vw, 1.45rem);
  --results-label-weight: 700;
  --results-value-size: clamp(2.6rem, 11vw, 4.9rem);
  --results-value-weight: 900;
}

/* "Payback" white, "Calculator" red */
.calc__title-accent {
  color: var(--label);
}

/* White "XTR" with a red "2" on a transparent background. About 22% of the panel width in the design. */
.logo {
  display: block;
  width: clamp(6.5rem, 22vw, 10rem);
  height: auto;
  margin-bottom: 0.9rem;
}

/* Results CTA is upright, not italic, in the design. */
.results .btn {
  --btn-font-style: normal;
  --btn-weight: 800;
  --btn-tracking: -0.01em;
  border-radius: 1.1rem;
}