/* Shell US / Shell Canada brand theme.
 *
 * Colours and font stacks are taken verbatim from the brand scheme Shell approved for the
 * Angular page this replaces (Shell-H5 modules/shell-brand-style/_brand-scheme.scss):
 * yellow #fbce07, red #dd1d21, green #008443, dark #404040, light #cfcfcf and the same
 * overlay. Do not "tidy" them -- these are the values Shell signed off.
 *
 * Futura is self-hosted for the same reason Kwik Trip's faces are: this page collects card
 * details and should not fetch from a third-party font host. The two woff2 files are the
 * ones the Angular app shipped.
 *
 * Without these @font-face rules the stack below falls through to Trebuchet MS, which is a
 * SILENT failure -- the page renders, just not in Shell's typeface.
 */

@font-face {
  font-family: 'Futura-Book';
  src: url('/assets/fonts/futura-book-webfont.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Futura-Bold';
  src: url('/assets/fonts/futura-bold-webfont.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

[data-theme='shell'] {
  --color-primary: #fbce07;
  --color-primary-hover: #e6bb00;
  --color-accent: #dd1d21;
  --color-danger: #dd1d21;
  --color-success: #008443;
  --color-text: #404040;
  --color-text-muted: #6b6b6b;
  --color-bg: #ffffff;
  --color-bg-muted: #f5f5f5;
  --color-border: #cfcfcf;
  --color-overlay: rgba(64, 64, 64, 0.9);

  --font-normal: 'Futura-Book', 'Trebuchet MS', Arial, sans-serif;
  --font-bold: 'Futura-Bold', 'Trebuchet MS', Arial, sans-serif;
}

/* Shell-specific: primary button uses yellow bg with dark text */
[data-theme='shell'] .btn-primary {
  color: #404040;
  font-family: var(--font-bold);
}