/* impacto design system: GENERATED from design-system/tokens.json by design-system/build.py.
   Do not edit by hand; change tokens.json and run `make design`. Shared by every surface:
   website, offer and card pages, owner and partner panels, till, back office. */
@font-face {
  font-family: "IBM Plex Sans";
  src: url("fonts/IBMPlexSans-var-latin.d28498895ed7.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
    U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("fonts/IBMPlexMono-500-latin.6708425c446b.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+20AC, U+2212;
}
@font-face {
  font-family: "Impacto Gap";
  src: url("fonts/ImpactoGap.428c1f733708.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+202F;
}

:root {
  --indigo: #233d4d;
  --indigo-deep: #142632;
  --pumpkin: #fe7f2d;
  --sun: #fcca46;
  --olive: #a1c181;
  --sea: #619b8a;
  --brick: #c2461c;
  --bg: #f4f7f8;
  --surface: #ffffff;
  --surface-2: #eaf0f2;
  --fg: #233d4d;
  --muted: #55707f;
  --line: #d6e0e4;
  --control-border: #748d9a;
  --link: #3f7a69;
  --focus: #233d4d;
  --action-bg: var(--pumpkin);
  --action-fg: var(--indigo-deep);
  --button-ink: #233d4d;
  --on-indigo: #ffffff;
  --on-indigo-muted: #c9d6dc;
  --pumpkin-ink: #a8480b;
  --success-soft: #e3efeb;
  --success-fg: #2f6b5a;
  --warning-soft: #fff4d4;
  --warning-fg: #8a6100;
  --danger-soft: #fbe6de;
  --danger-fg: #a93a14;
  --data-new: #3f7a69;
  --on-data-new: #ffffff;
  --data-regular: var(--sun);
  --data-returning: var(--pumpkin);
  --data-range: var(--sea);
  --data-track: #e4ecef;
  --data-other: #b7c7cf;
  --answer-edge: #233d4d00;
  --illustration-plate: #eaf0f2;
  --gift-bg: var(--sun);
  --gift-fg: var(--indigo);
  --receipt-paper: #ffffff;
  --receipt-rule: #b7c7cf;
  --shadow-card: 0 1px 2px rgba(35, 61, 77, 0.06), 0 6px 18px rgba(35, 61, 77, 0.05);
  --shadow-lift: 0 1px 0 #d6e0e4, 0 10px 30px rgba(20, 38, 50, 0.10);
  --shadow-device: 0 30px 60px -24px rgba(20, 38, 50, 0.45), 0 2px 0 rgba(20, 38, 50, 0.08);
  --fs-12: 12px;
  --fs-14: 14px;
  --fs-16: 16px;
  --fs-18: 18px;
  --fs-20: 20px;
  --fs-24: 24px;
  --fs-30: 30px;
  --fs-40: 40px;
  --fs-56: 56px;
  --fs-80: 80px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;
  --radius-s: 8px;
  --radius-m: 12px;
  --radius-l: 20px;
  --radius-pill: 999px;
  --duration-fast: 150ms;
  --duration-base: 250ms;
  --duration-slow: 450ms;
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-spring: cubic-bezier(0.3, 1.35, 0.45, 1);
  --font-sans: "Impacto Gap", "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Impacto Gap", "IBM Plex Mono", ui-monospace, Menlo, monospace;
  /* legacy names, kept until every screen uses components.css */
  --sea-soft: var(--success-soft);
  --sun-soft: var(--warning-soft);
  --brick-soft: var(--danger-soft);
  --radius: 14px;
  --radius-sm: 10px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #142632;
    --surface: #1b3140;
    --surface-2: #213a4a;
    --fg: #eaf1f3;
    --muted: #9db4bf;
    --line: #2b4656;
    --control-border: #6b8999;
    --link: #8fc4b4;
    --focus: #fcca46;
    --action-bg: var(--pumpkin);
    --action-fg: var(--indigo-deep);
    --button-ink: #0b1820;
    --pumpkin-ink: #f59a5c;
    --success-soft: #1d3a37;
    --success-fg: #9fd0bf;
    --warning-soft: #3a3320;
    --warning-fg: #e6c46a;
    --danger-soft: #3d241d;
    --danger-fg: #e8a07a;
    --data-new: #8fc4b4;
    --on-data-new: #142632;
    --data-regular: var(--sun);
    --data-returning: var(--pumpkin);
    --data-range: var(--sea);
    --data-track: #2b4656;
    --data-other: #4a6474;
    --answer-edge: #3b5a6e;
    --illustration-plate: #eaf1f3;
    --gift-bg: var(--sun);
    --gift-fg: var(--indigo);
    --receipt-paper: #ffffff;
    --receipt-rule: #b7c7cf;
    --shadow-card: none;
    --shadow-lift: 0 10px 30px rgba(0, 0, 0, 0.35);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #142632;
  --surface: #1b3140;
  --surface-2: #213a4a;
  --fg: #eaf1f3;
  --muted: #9db4bf;
  --line: #2b4656;
  --control-border: #6b8999;
  --link: #8fc4b4;
  --focus: #fcca46;
  --action-bg: var(--pumpkin);
  --action-fg: var(--indigo-deep);
  --button-ink: #0b1820;
  --pumpkin-ink: #f59a5c;
  --success-soft: #1d3a37;
  --success-fg: #9fd0bf;
  --warning-soft: #3a3320;
  --warning-fg: #e6c46a;
  --danger-soft: #3d241d;
  --danger-fg: #e8a07a;
  --data-new: #8fc4b4;
  --on-data-new: #142632;
  --data-regular: var(--sun);
  --data-returning: var(--pumpkin);
  --data-range: var(--sea);
  --data-track: #2b4656;
  --data-other: #4a6474;
  --answer-edge: #3b5a6e;
  --illustration-plate: #eaf1f3;
  --gift-bg: var(--sun);
  --gift-fg: var(--indigo);
  --receipt-paper: #ffffff;
  --receipt-rule: #b7c7cf;
  --shadow-card: none;
  --shadow-lift: 0 10px 30px rgba(0, 0, 0, 0.35);
  color-scheme: dark;
}

.display-xl { font-family: var(--font-sans); font-size: 80px; line-height: 1.02; font-weight: 700; letter-spacing: -0.035em; }
.display-l { font-family: var(--font-sans); font-size: 56px; line-height: 1.05; font-weight: 700; letter-spacing: -0.03em; }
.display-m { font-family: var(--font-sans); font-size: 40px; line-height: 1.08; font-weight: 700; letter-spacing: -0.025em; }
.title-xl { font-family: var(--font-sans); font-size: 30px; line-height: 1.15; font-weight: 700; letter-spacing: -0.02em; }
.title-l { font-family: var(--font-sans); font-size: 24px; line-height: 1.2; font-weight: 650; letter-spacing: -0.015em; }
.title-m { font-family: var(--font-sans); font-size: 20px; line-height: 1.25; font-weight: 600; letter-spacing: -0.01em; }
.text-l { font-family: var(--font-sans); font-size: 18px; line-height: 1.55; font-weight: 400; }
.text-body { font-family: var(--font-sans); font-size: 16px; line-height: 1.5; font-weight: 400; }
.text-s { font-family: var(--font-sans); font-size: 14px; line-height: 1.45; font-weight: 400; }
.text-caption { font-family: var(--font-sans); font-size: 12px; line-height: 1.4; font-weight: 500; }
.figure-xl { font-family: var(--font-mono); font-size: 30px; line-height: 1.05; font-weight: 500; font-variant-numeric: tabular-nums; }
.figure-l { font-family: var(--font-mono); font-size: 20px; line-height: 1.15; font-weight: 500; font-variant-numeric: tabular-nums; }
.figure-m { font-family: var(--font-mono); font-size: 14px; line-height: 1.4; font-weight: 500; font-variant-numeric: tabular-nums; }
.code { font-family: var(--font-mono); font-size: 14px; line-height: 1.2; font-weight: 500; letter-spacing: 0.14em; font-variant-numeric: tabular-nums; }

:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.on-indigo { --focus: var(--sun); }