/* ==========================================================================
   BanBajío Design System — tokens + base + components
   Single source of truth for generated assets. Values mirror DESIGN.md.
   Light is default; dark via [data-theme="dark"] or prefers-color-scheme.
   ========================================================================== */

:root {
  /* color — brand */
  --primary: #573b95;
  --primary-strong: #3f2a6d;
  --primary-soft: #7a5cc4;
  --primary-tint: #f2eff8;
  --accent: #ee060f;
  --gradient-from: #573b95;
  --gradient-to: #ba51a6;

  /* color — surfaces */
  --canvas: #faf9fc;
  --surface: #ffffff;
  --surface-2: #f4f2f9;
  --rule: rgba(26, 23, 32, 0.12);

  /* color — text */
  --ink: #1a1720;
  --ink-muted: #6f6b7a;
  --ink-soft: #9a95a8;
  --on-primary: #ffffff;
  --on-accent: #ffffff;
  --on-gradient: #ffffff;
  --glass: rgba(255, 255, 255, 0.16);
  --glass-strong: rgba(255, 255, 255, 0.72);
  --glass-dark: rgba(20, 16, 31, 0.28);
  /* gradient surfaces are always purple — these never flip with the theme */
  --gradient-btn-bg: #ffffff;
  --gradient-btn-ink: #3f2a6d;
  --canvas-dark: #14101f;
  /* credit card */
  /* ISO/IEC 7810 ID-1 — true card geometry */
  --card-aspect: 1.586;
  --card-width: 85.6mm;
  --card-height: 53.98mm;
  --card-radius: 3.18mm;   /* the standard ID-1 corner radius */
  --card-radius-ratio: 3.715cqi; /* 3.18 / 85.6 — scales with the card */
  --card-sheen: rgba(255, 255, 255, 0.16);
  --card-stripe: #17131f;
  --card-chip-1: #f4dd9a;
  --card-chip-2: #c49a3f;
  --card-chip-line: rgba(20, 16, 31, 0.35);
  --card-signature-bg: rgba(255, 255, 255, 0.92);
  --card-frost: rgba(250, 249, 252, 0.55);
  --card-platinum-1: #241e33;
  --card-platinum-2: #0d0a14;

  /* color — semantic */
  --success: #1f9d6b;
  --warning: #e88b00;
  --danger: #d92d20;
  --info: #5c70b4;

  /* type */
  --font-brand: "Signika", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --fs-display-xl: clamp(2.75rem, 6vw, 5rem);
  --fs-display-lg: clamp(2.25rem, 4.5vw, 3.5rem);
  --fs-display-md: clamp(1.75rem, 3vw, 2.5rem);
  --fs-headline-lg: 2rem;
  --fs-headline-md: 1.5rem;
  --fs-body-lg: 1.125rem;
  --fs-body-md: 1rem;
  --fs-body-sm: 0.875rem;
  --fs-label-lg: 0.9375rem;
  --fs-label-md: 0.8125rem;
  --fs-label-sm: 0.6875rem;

  /* shape */
  /* Deliberately rectangular: small radii, close to square. */
  --r-none: 0;
  --r-sm: 2px;
  --r-md: 4px;
  --r-lg: 6px;
  --r-xl: 8px;
  --r-pill: 9999px; /* reserved — not used by actions or cards */

  /* space */
  --s-2: 2px; --s-4: 4px; --s-8: 8px; --s-12: 12px; --s-16: 16px;
  --s-24: 24px; --s-32: 32px; --s-48: 48px; --s-64: 64px;
  --s-96: 96px; --s-128: 128px;

  /* elevation */
  --glow: 0 0 0 1px var(--primary), 0 8px 40px rgba(87, 59, 149, 0.18);

  /* motion */
  --t-fast: 120ms;
  --t-base: 200ms;
  --t-slow: 320ms;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

[data-theme="dark"] {
  --primary: #8a68d6;
  --primary-strong: #a98ae0;
  --primary-soft: #6f52b8;
  --primary-tint: #241c38;
  --accent: #ff3b42;
  --canvas: #14101f;
  --surface: #1e1830;
  --surface-2: #2a2240;
  --rule: rgba(244, 243, 247, 0.12);
  --ink: #f4f3f7;
  --ink-muted: #b9b6c4;
  --ink-soft: #8b8798;
  --on-primary: #14101f;
  --success: #35c48c;
  --warning: #f0a733;
  --danger: #f2635b;
  --info: #8ba2dd;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --primary: #8a68d6;
    --primary-strong: #a98ae0;
    --primary-soft: #6f52b8;
    --primary-tint: #241c38;
    --accent: #ff3b42;
    --canvas: #14101f;
    --surface: #1e1830;
    --surface-2: #2a2240;
    --rule: rgba(244, 243, 247, 0.12);
    --ink: #f4f3f7;
    --ink-muted: #b9b6c4;
    --ink-soft: #8b8798;
    --on-primary: #14101f;
  }
}

/* ── base ─────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-brand);
  font-size: var(--fs-body-md);
  line-height: 1.6;
  color: var(--ink);
  background: var(--canvas);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { margin: 0 0 var(--s-16); font-weight: 600; letter-spacing: -0.02em; }
progress, input[type="checkbox"], input[type="radio"] { accent-color: var(--primary); }
p { margin: 0 0 var(--s-16); }
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; height: auto; }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: var(--r-sm); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ── type utilities ───────────────────────────────────────────────────── */
.display-xl { font-size: var(--fs-display-xl); line-height: 1; letter-spacing: -0.03em; font-weight: 600; }
.display-lg { font-size: var(--fs-display-lg); line-height: 1.02; letter-spacing: -0.025em; font-weight: 600; }
.display-md { font-size: var(--fs-display-md); line-height: 1.05; letter-spacing: -0.02em; font-weight: 600; }
.headline-lg { font-size: var(--fs-headline-lg); line-height: 1.1; font-weight: 600; }
.headline-md { font-size: var(--fs-headline-md); line-height: 1.15; font-weight: 600; }
.body-lg { font-size: var(--fs-body-lg); line-height: 1.6; }
.body-sm { font-size: var(--fs-body-sm); line-height: 1.55; }
.label-lg { font-size: var(--fs-label-lg); font-weight: 600; line-height: 1.2; }
.label-md { font-size: var(--fs-label-md); font-weight: 600; line-height: 1.2; }
.eyebrow {
  font-size: var(--fs-label-sm); font-weight: 600; line-height: 1.2;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted);
}
.mono-num { font-family: var(--font-mono); font-feature-settings: "tnum"; font-weight: 500; }
.muted { color: var(--ink-muted); }
.soft { color: var(--ink-soft); }

/* ── layout ───────────────────────────────────────────────────────────── */
.container { width: min(1200px, 100% - 48px); margin-inline: auto; }
.grid { display: grid; gap: var(--s-24); grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.stack > * + * { margin-top: var(--s-16); }
.section { padding-block: var(--s-96); }
.row { display: flex; gap: var(--s-16); align-items: center; flex-wrap: wrap; }

/* ── brand ────────────────────────────────────────────────────────────── */
/* Brand mark — theme-aware lockup: standard on light, reversed on dark.
   Usage: <span class="brand-lockup"><img class="brand-mark" …><img class="brand-reverse" …></span>
   Add class `brand-on-dark` for gradient/purple surfaces regardless of theme. */
.brand-lockup { display: inline-flex; }
.brand-lockup .brand-mark, .brand-lockup .brand-reverse { height: 26px; width: auto; display: block; }
.brand-lockup .brand-reverse { display: none; }
[data-theme="dark"] .brand-lockup .brand-mark { display: none; }
[data-theme="dark"] .brand-lockup .brand-reverse { display: block; }
.brand-on-dark .brand-mark { display: none !important; }
.brand-on-dark .brand-reverse { display: block !important; }
.brand-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--s-24); padding-block: var(--s-24); }

/* ── buttons ──────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-8);
  font-family: var(--font-brand); font-size: var(--fs-label-lg); font-weight: 600;
  border: 0; border-radius: var(--r-md); padding: 14px var(--s-24); min-height: 48px;
  cursor: pointer; text-decoration: none; transition: background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--primary); color: var(--on-primary); }
.btn-primary:hover { background: var(--primary-strong); }
.btn-secondary { background: var(--surface); color: var(--primary); box-shadow: inset 0 0 0 1px var(--rule); }
.btn-secondary:hover { background: var(--primary-tint); }
.btn-ghost { background: transparent; color: var(--primary); padding-inline: var(--s-16); min-height: 40px; }
.btn-ghost:hover { background: var(--primary-tint); }
/* Inverse button for gradient/dark surfaces — must beat `.hero-gradient a`. */
.btn-inverse { background: var(--gradient-btn-bg); color: var(--gradient-btn-ink); }
.hero-gradient a.btn-inverse, .hero-gradient .btn-inverse,
.on-gradient a.btn-inverse, .on-gradient .btn-inverse { background: var(--gradient-btn-bg); color: var(--gradient-btn-ink); }


/* ── surfaces ─────────────────────────────────────────────────────────── */
.card { background: var(--surface); border-radius: var(--r-lg); padding: var(--s-24); box-shadow: inset 0 0 0 1px var(--rule); }
.card-focal { background: var(--primary-tint); border-radius: var(--r-lg); padding: var(--s-24); box-shadow: var(--glow); }
.tile-rate { background: var(--surface); border-radius: var(--r-md); padding: var(--s-16); box-shadow: inset 0 0 0 1px var(--rule); }
.stat { display: flex; flex-direction: column; gap: var(--s-4); }
.stat .value { font-family: var(--font-mono); font-feature-settings: "tnum"; font-size: var(--fs-headline-md); font-weight: 500; }

/* ── forms ────────────────────────────────────────────────────────────── */
.input, .select {
  width: 100%; font-family: var(--font-brand); font-size: var(--fs-body-md);
  color: var(--ink); background: var(--surface);
  border: 1px solid var(--rule); border-radius: var(--r-md);
  padding: 12px var(--s-16); min-height: 48px;
}
.input::placeholder { color: var(--ink-soft); }

/* ── badge / nav ──────────────────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center; gap: var(--s-4);
  background: var(--primary-tint); color: var(--primary);
  font-size: var(--fs-label-sm); font-weight: 600; letter-spacing: 0.04em;
  border-radius: var(--r-pill); padding: 6px var(--s-12); text-transform: uppercase;
}
.badge-live { background: var(--accent); color: var(--on-accent); }
.seg-nav { display: inline-flex; gap: var(--s-4); background: var(--surface-2); border-radius: var(--r-md); padding: var(--s-4); }
.seg-nav a { font-size: var(--fs-label-md); font-weight: 600; color: var(--ink-muted); border-radius: var(--r-sm); padding: 8px var(--s-16); }
.seg-nav a[aria-current="page"] { background: var(--surface); color: var(--ink); box-shadow: inset 0 0 0 1px var(--rule); }

/* ── hero ─────────────────────────────────────────────────────────────── */
.hero { padding: var(--s-96) var(--s-24); background: var(--canvas); }
.hero-gradient {
  background: linear-gradient(135deg, var(--gradient-from), var(--gradient-to));
  color: var(--on-gradient);
}
.hero-gradient a { color: var(--on-gradient); }

/* ── chat ─────────────────────────────────────────────────────────────── */
.chat-bubble { background: var(--surface); border-radius: var(--r-lg); padding: 12px var(--s-16); box-shadow: inset 0 0 0 1px var(--rule); max-width: 42ch; }
.chat-bubble.me { background: var(--primary); color: var(--on-primary); margin-left: auto; }

/* ── story (9:16) ─────────────────────────────────────────────────────── */
.story-card {
  width: 1080px; height: 1920px; max-width: 100%;
  background: linear-gradient(160deg, var(--gradient-from), var(--gradient-to));
  color: var(--on-gradient); padding: var(--s-96) var(--s-64);
  display: flex; flex-direction: column; justify-content: space-between;
}

/* ── footer / legal ───────────────────────────────────────────────────── */
.footer { background: var(--canvas); border-top: 1px solid var(--rule); padding: var(--s-64) var(--s-24); color: var(--ink-muted); font-size: var(--fs-body-sm); }
.disclaimer { color: var(--ink-soft); font-size: var(--fs-body-sm); }

/* ── credit card ──────────────────────────────────────────────────────── */
/* ISO/IEC 7810 ID-1 proportions. Front + back, CSS-only flip and reveal. */
.card-credit { --card-scale: 1; position: relative;
  width: min(100%, calc(var(--card-width) * var(--card-scale)));
  container-type: inline-size; perspective: 1200px; }
.card-credit--lg { --card-scale: 1.2; }
.card-credit__inner { position: relative; aspect-ratio: var(--card-aspect); transform-style: preserve-3d; }
@media (prefers-reduced-motion: no-preference) {
  .card-credit__inner { transition: transform var(--t-slow) var(--ease); }
}
.card-credit__face {
  position: absolute; inset: 0; overflow: hidden;
  border-radius: var(--card-radius);        /* 3.18mm fallback */
  border-radius: var(--card-radius-ratio);  /* proportional to the card */
  padding: 7cqi; display: flex; flex-direction: column; justify-content: space-between;
  color: var(--on-gradient); backface-visibility: hidden;
}
.card-credit__front, .card-credit__back { background: linear-gradient(135deg, var(--gradient-from), var(--gradient-to)); }
.card-credit__back { transform: rotateY(180deg); }
.cc-flip:checked ~ .card-credit__inner { transform: rotateY(180deg); }

.card-credit__sheen { position: absolute; top: -40%; right: -10%; width: 70%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, var(--card-sheen), transparent 70%); pointer-events: none; }
.card-credit__top { position: relative; z-index: 1; display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-16); }
.card-credit__network { position: relative; display: block; width: 14cqi; height: 8.4cqi; }
.card-credit__network-c1, .card-credit__network-c2 { position: absolute; top: 0; height: 100%; aspect-ratio: 1; border-radius: 50%; }
.card-credit__network-c1 { left: 0; background: var(--on-gradient); }
.card-credit__network-c2 { right: 0; background: var(--on-gradient); opacity: .5; }
.card-credit__mid { position: relative; z-index: 1; display: flex; align-items: center; gap: var(--s-12); }
.card-credit__chip { position: relative; display: block; width: 14cqi; height: 11cqi; border-radius: var(--r-md);
  background: linear-gradient(135deg, var(--card-chip-1), var(--card-chip-2)); }
.card-credit__chip::before { content: ""; position: absolute; inset: 26% 0; border-top: 1.4px solid var(--card-chip-line); border-bottom: 1.4px solid var(--card-chip-line); }
.card-credit__chip::after { content: ""; position: absolute; inset: 0 28%; border-left: 1.4px solid var(--card-chip-line); border-right: 1.4px solid var(--card-chip-line); }
.card-credit__contactless { width: 6.5cqi; height: 6.5cqi; opacity: .9; }
.card-credit__bottom { position: relative; z-index: 1; }
.card-credit__label { font-size: var(--fs-label-sm); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--glass-strong); }
.card-credit__number { margin: 0 0 var(--s-12); font-family: var(--font-mono); font-feature-settings: "tnum";
  font-size: 5cqi; letter-spacing: .1em; }
.card-credit__number .full { display: none; }
.cc-reveal:checked ~ .card-credit__inner .card-credit__number .masked { display: none; }
.cc-reveal:checked ~ .card-credit__inner .card-credit__number .full { display: inline; }
.card-credit__meta { display: flex; gap: var(--s-32); }
.card-credit__meta strong { display: block; font-size: var(--fs-label-md); letter-spacing: .03em; text-transform: uppercase; }
.card-credit__watermark { position: absolute; right: -8%; bottom: -20%; width: 48%; opacity: .18; pointer-events: none; z-index: 0; }
.card-credit__watermark img { width: 100%; height: auto; }

/* back */
.card-credit__stripe { height: 18%; background: var(--card-stripe); margin: var(--s-8) calc(-1 * 7cqi) var(--s-16); }
.card-credit__signature { display: flex; align-items: center; justify-content: space-between; gap: var(--s-16);
  background: var(--card-signature-bg); color: var(--ink); border-radius: var(--r-sm); padding: var(--s-8) var(--s-12); }
.card-credit__signature .card-credit__label { color: var(--ink-muted); }
.card-credit__cvv strong { font-family: var(--font-mono); letter-spacing: .14em; }
.card-credit__legal { font-size: var(--fs-label-sm); color: var(--glass-strong); max-width: 36ch; }

/* variants */
.card-credit--platinum .card-credit__front, .card-credit--platinum .card-credit__back { background: linear-gradient(135deg, var(--card-platinum-1), var(--card-platinum-2)); }
.card-credit--virtual .card-credit__front, .card-credit--virtual .card-credit__back {
  background: var(--surface); border: 1.5px dashed var(--primary); color: var(--ink); }
.card-credit--virtual .card-credit__label, .card-credit--virtual .card-credit__legal { color: var(--ink-muted); }

/* frozen state */
.card-credit.is-frozen .card-credit__front::after { content: ""; position: absolute; inset: 0;
  background: var(--card-frost); backdrop-filter: blur(6px); }
.card-credit__badge { position: absolute; z-index: 2; top: var(--s-16); left: 50%; transform: translateX(-50%); }

/* controls */
.card-credit__controls { display: flex; flex-wrap: wrap; gap: var(--s-12); margin-top: var(--s-16); }
.cc-toggle { cursor: pointer; font-size: var(--fs-label-md); font-weight: 600; color: var(--primary);
  background: var(--primary-tint); border-radius: var(--r-md); padding: 8px var(--s-16); }
.cc-toggle .when-back, .cc-toggle .when-on { display: none; }
.cc-flip:checked ~ .card-credit__controls .cc-toggle[for$="-flip"] .when-front { display: none; }
.cc-flip:checked ~ .card-credit__controls .cc-toggle[for$="-flip"] .when-back { display: inline; }
.cc-reveal:checked ~ .card-credit__controls .cc-toggle[for$="-reveal"] .when-off { display: none; }
.cc-reveal:checked ~ .card-credit__controls .cc-toggle[for$="-reveal"] .when-on { display: inline; }

/* ── motion (optional) ────────────────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  .reveal { animation: reveal var(--t-slow) var(--ease) both; }
  .reveal:nth-child(2) { animation-delay: 80ms; }
  .reveal:nth-child(3) { animation-delay: 160ms; }
  .reveal:nth-child(4) { animation-delay: 240ms; }
  @keyframes reveal { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
  .card, .card-focal { transition: transform var(--t-base) var(--ease); }
  .card:hover, .card-focal:hover { transform: translateY(-2px); }
}

/* @tokens-end */