/* Mastercard Design System — Colors & Type tokens
 * Source: uploads/DESIGN.md
 */

@import url('https://fonts.googleapis.com/css2?family=Sofia+Sans:wght@300;400;500;600;700&display=swap');

:root {
  /* === Brand mark colors (logo only — never UI) === */
  --mc-red: #EB001B;
  --mc-yellow: #F79E1B;

  /* === Ink / text === */
  --ink-black: #141413;       /* primary text, CTAs, footer */
  --charcoal: #262627;        /* alternate softer black */
  --slate-gray: #696969;      /* muted secondary text */
  --granite: #555555;         /* deep gray accent */
  --graphite: #565656;        /* link alternate */
  --dust-taupe: #D1CDC7;      /* whisper / disabled */

  /* === Signal / accent === */
  --signal-orange: #CF4500;   /* consent CTAs */
  --light-signal-orange: #F37338; /* orbital arcs, carousel cues */
  --clay-brown: #9A3A0A;      /* secondary link buttons */

  /* === Surfaces === */
  --canvas-cream: #F3F0EE;    /* default body background */
  --lifted-cream: #FCFBFA;    /* nested raised surface */
  --soft-bone: #F4F4F4;       /* alt cool-gray surface */
  --white: #FFFFFF;           /* nav pill, modal cards, satellite */
  --whisper-cream: #E8E2DA;   /* ghost watermark text */

  /* === Semantic === */
  --link-blue: #3860BE;
  --color-teal: #1a8c7a;       /* accent teal for tertiary links/badges */

  /* === Semantic foreground/background aliases === */
  --bg: var(--canvas-cream);
  --bg-lifted: var(--lifted-cream);
  --bg-inverse: var(--ink-black);
  --fg: var(--ink-black);
  --fg-muted: var(--slate-gray);
  --fg-inverse: var(--canvas-cream);
  --border: var(--ink-black);
  --link: var(--link-blue);

  /* === Typography === */
  --font-display: 'MarkForMC', 'Sofia Sans', Arial, sans-serif;
  --font-body: 'MarkForMC', 'Sofia Sans', Arial, sans-serif;
  --font-official: 'MarkOffcForMC', 'Sofia Sans', Arial, sans-serif;

  /* Type scale */
  --fs-h1: 72px;
  --fs-h2: 40px;
  --fs-h3: 28px;
  --fs-h4: 16px;
  --fs-eyebrow: 13px;
  --fs-body: 17px;
  --fs-nav: 17px;
  /* Footer.jsx uses inline literals (11px / 13px) — these vars are kept in sync but not consumed */
  --fs-footer-link: 11px;
  --fs-footer-head: 13px;

  /* Line heights */
  --lh-h1: 1;
  --lh-h2: 1.22;       /* 44/36 */
  --lh-h3: 1.2;
  --lh-body: 1.4;
  --lh-eyebrow: 1;

  /* Letter spacing */
  --ls-display: -0.02em;
  --ls-button: -0.03em;
  --ls-eyebrow: 0.04em;

  /* Weights */
  --fw-body: 450;       /* signature half-step body weight */
  --fw-medium: 500;
  --fw-bold: 700;

  /* === Spacing scale (8px base) === */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 48px;
  --space-6: 64px;
  --space-7: 96px;
  --space-8: 128px;

  /* === Radii === */
  --radius-xs: 4px;
  --radius-button: 20px;
  --radius-orange: 24px;
  --radius-stadium: 40px;
  --radius-pill: 999px;
  --radius-circle: 50%;

  /* === Shadows === */
  --shadow-1: rgba(0, 0, 0, 0.04) 0px 4px 24px 0px;
  --shadow-2: rgba(0, 0, 0, 0.08) 0px 24px 48px 0px;
  --shadow-3: rgba(0, 0, 0, 0.25) 0px 70px 110px 0px;
}

/* === Semantic element styles === */

html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-weight: var(--fw-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}

h1, .h1 {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  font-weight: var(--fw-medium);
  line-height: var(--lh-h1);
  letter-spacing: var(--ls-display);
  color: var(--fg);
  margin: 0;
}

h2, .h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: var(--fw-medium);
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-display);
  color: var(--fg);
  margin: 0;
}

h3, .h3 {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: var(--fw-medium);
  line-height: var(--lh-h3);
  letter-spacing: var(--ls-display);
  color: var(--fg);
  margin: 0;
}

h4, .h4 {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: var(--fw-bold);
  line-height: 1.3;
  margin: 0;
}

.eyebrow {
  font-family: var(--font-display);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-bold);
  line-height: var(--lh-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--fg);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

p {
  font-size: var(--fs-body);
  font-weight: var(--fw-body);
  line-height: var(--lh-body);
  margin: 0;
}

a {
  color: var(--link);
  text-decoration: none;
}

code, .mono {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
}