/* Kwik Trip brand theme.
 *
 * Primary is #C8102E -- the value already shipped for Kwik Trip in the Angular page this
 * replaces ($main-color). The printed card art measures a slightly different red (#D01F2F);
 * the shipped value wins as the one their customers have already seen.
 *
 * Fonts are self-hosted rather than pulled from a font CDN: this page collects card details,
 * so it should not make requests to third-party hosts. (The legacy page fetched its one card
 * icon from img.icons8.com on every load.)
 */

@font-face {
  font-family: 'Archivo';
  src: url('/assets/fonts/Archivo.woff2') format('woff2');
  font-weight: 100 900; /* variable */
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Public Sans';
  src: url('/assets/fonts/PublicSans.woff2') format('woff2');
  font-weight: 100 900; /* variable */
  font-style: normal;
  font-display: swap;
}

[data-theme='kwiktrip'] {
  --color-primary: #c8102e;
  --color-primary-hover: #a00d24;
  --color-accent: #c8102e;

  /* Deliberately NOT the brand red. When a brand's colour is also its alarm colour, a failure
     stops reading as a failure -- so danger sits darker and flatter than the button beside it. */
  --color-danger: #8e1220;
  --color-success: #0f6b45;

  /* Neutrals carry a slight red bias so they sit with the accent rather than against it. */
  --color-text: #1a1416;
  --color-text-muted: #6b6063;
  --color-bg: #ffffff;
  --color-bg-muted: #fbf9f9;
  --color-border: #e2dadc;
  --color-overlay: rgba(26, 20, 22, 0.6);

  --font-normal: 'Public Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-bold: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* Headings and the primary action take the display face; body copy stays on Public Sans. */
[data-theme='kwiktrip'] h1,
[data-theme='kwiktrip'] h2,
[data-theme='kwiktrip'] h3 {
  font-family: var(--font-bold);
  letter-spacing: -0.01em;
}

[data-theme='kwiktrip'] .btn-primary {
  font-family: var(--font-bold);
  letter-spacing: 0.01em;
}

/* Digits must not reflow as they are typed -- a card number that changes width mid-entry
   reads as the field glitching. */
[data-theme='kwiktrip'] .form-input {
  font-variant-numeric: tabular-nums;
}