/* ==========================================================================
   Wallet Cards Design System — tokens bundle for the wallet-saas web app.
   Merged from reference/design/tokens/*.css + styles.css (see readme.md).
   Consumers link THIS file FIRST on every page. Variables only + a small
   set of ready-to-apply typography utility classes — no component rules.
   ========================================================================== */

/* ---------------------------------------------------------- Fonts (import must stay first) */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

:root {
  /* --- Families --- */
  --font-display: "SF Pro Display", system-ui, -apple-system, "Inter", sans-serif;
  --font-text: "SF Pro Text", system-ui, -apple-system, "Inter", sans-serif;

  /* --- Weights (500 deliberately absent) --- */
  --fw-light: 300;
  --fw-regular: 400;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* ---------- Colors ---------- */
  /* Brand & accent (the single interactive color) */
  --blue-action: #0066cc;
  --blue-focus: #0071e3;
  --blue-on-dark: #2997ff;

  /* Ink / text */
  --ink: #1d1d1f;
  --ink-80: #333333;
  --ink-48: #7a7a7a;
  --on-dark: #ffffff;
  --on-dark-muted: #cccccc;
  --on-primary: #ffffff;

  /* Surfaces */
  --canvas: #ffffff;
  --parchment: #f5f5f7;
  --pearl: #fafafc;
  --tile-1: #272729;
  --tile-2: #2a2a2c;
  --tile-3: #252527;
  --black: #000000;
  --chip-translucent: rgba(210, 210, 215, 0.64);

  /* Hairlines & borders */
  --divider-soft: #f0f0f0;
  --hairline: #e0e0e0;
  --border-faint: rgba(0, 0, 0, 0.08);

  /* Semantic status (intentional B2B addition — quiet, only in Badge/Toast) */
  --green: #1d8a4d;
  --green-soft: #e8f5ee;
  --amber: #9a6700;
  --amber-soft: #fbf3e0;
  --red: #c9372c;
  --red-soft: #fbeae8;

  /* Semantic aliases */
  --text-primary: var(--ink);
  --text-secondary: var(--ink-48);
  --text-strong: var(--ink);
  --text-on-dark: var(--on-dark);
  --text-link: var(--blue-action);

  --surface-page: var(--parchment);
  --surface-card: var(--canvas);
  --surface-raised: var(--canvas);
  --surface-dark: var(--tile-1);

  --border-card: var(--hairline);
  --border-input: var(--border-faint);
  --border-divider: var(--divider-soft);

  --accent: var(--blue-action);
  --accent-focus: var(--blue-focus);
  --focus-ring: var(--blue-focus);

  /* ---------- Type scale (size / weight / line-height / tracking) ---------- */
  --t-hero-size: 56px;
  --t-hero-weight: 600;
  --t-hero-lh: 1.07;
  --t-hero-ls: -0.28px;

  --t-display-lg-size: 40px;
  --t-display-lg-weight: 600;
  --t-display-lg-lh: 1.1;
  --t-display-lg-ls: 0;

  --t-display-md-size: 34px;
  --t-display-md-weight: 600;
  --t-display-md-lh: 1.2;
  --t-display-md-ls: -0.374px;

  --t-lead-size: 28px;
  --t-lead-weight: 400;
  --t-lead-lh: 1.14;
  --t-lead-ls: 0.196px;

  --t-lead-airy-size: 24px;
  --t-lead-airy-weight: 300;
  --t-lead-airy-lh: 1.5;
  --t-lead-airy-ls: 0;

  --t-tagline-size: 21px;
  --t-tagline-weight: 600;
  --t-tagline-lh: 1.19;
  --t-tagline-ls: 0.231px;

  --t-body-strong-size: 17px;
  --t-body-strong-weight: 600;
  --t-body-strong-lh: 1.24;
  --t-body-strong-ls: -0.374px;

  --t-body-size: 17px;
  --t-body-weight: 400;
  --t-body-lh: 1.47;
  --t-body-ls: -0.374px;

  --t-caption-size: 14px;
  --t-caption-weight: 400;
  --t-caption-lh: 1.43;
  --t-caption-ls: -0.224px;

  --t-caption-strong-size: 14px;
  --t-caption-strong-weight: 600;
  --t-caption-strong-lh: 1.29;
  --t-caption-strong-ls: -0.224px;

  --t-fine-size: 12px;
  --t-fine-weight: 400;
  --t-fine-lh: 1.33;
  --t-fine-ls: -0.12px;

  --t-micro-size: 10px;
  --t-micro-weight: 400;
  --t-micro-lh: 1.3;
  --t-micro-ls: -0.08px;

  --text-hero: var(--font-display);
  --text-heading: var(--font-display);
  --text-body-family: var(--font-text);

  /* ---------- Spacing (base 8px) ---------- */
  --space-xxs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 17px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-xxl: 48px;
  --space-section: 80px;

  --pad-card: var(--space-lg);
  --pad-tile: var(--space-section);
  --gap-grid: var(--space-lg);

  --width-text: 980px;
  --width-content: 1440px;

  /* ---------- Radius ---------- */
  --radius-none: 0px;
  --radius-xs: 5px;
  --radius-sm: 8px;
  --radius-md: 11px;
  --radius-lg: 18px;
  --radius-pill: 9999px;
  --radius-full: 9999px;

  --radius-button: var(--radius-pill);
  --radius-card: var(--radius-lg);
  --radius-input: var(--radius-pill);
  --radius-control: var(--radius-sm);

  /* ---------- Elevation & motion (exactly one product shadow) ---------- */
  --shadow-product: rgba(0, 0, 0, 0.22) 3px 5px 30px 0px;
  --blur-frosted: saturate(180%) blur(20px);
  --frosted-fill: rgba(245, 245, 247, 0.8);
  --shadow-popover: rgba(0, 0, 0, 0.12) 0px 8px 28px -6px;

  --press-scale: scale(0.95);
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 120ms;
  --dur-base: 240ms;
}

/* ---------- Ready-to-apply typography utility classes ---------- */
.t-hero        { font-family: var(--font-display); font-size: var(--t-hero-size); font-weight: var(--t-hero-weight); line-height: var(--t-hero-lh); letter-spacing: var(--t-hero-ls); }
.t-display-lg  { font-family: var(--font-display); font-size: var(--t-display-lg-size); font-weight: var(--t-display-lg-weight); line-height: var(--t-display-lg-lh); letter-spacing: var(--t-display-lg-ls); }
.t-display-md  { font-family: var(--font-display); font-size: var(--t-display-md-size); font-weight: var(--t-display-md-weight); line-height: var(--t-display-md-lh); letter-spacing: var(--t-display-md-ls); }
.t-lead        { font-family: var(--font-display); font-size: var(--t-lead-size); font-weight: var(--t-lead-weight); line-height: var(--t-lead-lh); letter-spacing: var(--t-lead-ls); }
.t-lead-airy   { font-family: var(--font-text); font-size: var(--t-lead-airy-size); font-weight: var(--t-lead-airy-weight); line-height: var(--t-lead-airy-lh); letter-spacing: var(--t-lead-airy-ls); }
.t-tagline     { font-family: var(--font-display); font-size: var(--t-tagline-size); font-weight: var(--t-tagline-weight); line-height: var(--t-tagline-lh); letter-spacing: var(--t-tagline-ls); }
.t-body-strong { font-family: var(--font-text); font-size: var(--t-body-strong-size); font-weight: var(--t-body-strong-weight); line-height: var(--t-body-strong-lh); letter-spacing: var(--t-body-strong-ls); }
.t-body        { font-family: var(--font-text); font-size: var(--t-body-size); font-weight: var(--t-body-weight); line-height: var(--t-body-lh); letter-spacing: var(--t-body-ls); }
.t-caption     { font-family: var(--font-text); font-size: var(--t-caption-size); font-weight: var(--t-caption-weight); line-height: var(--t-caption-lh); letter-spacing: var(--t-caption-ls); }
.t-caption-strong { font-family: var(--font-text); font-size: var(--t-caption-strong-size); font-weight: var(--t-caption-strong-weight); line-height: var(--t-caption-strong-lh); letter-spacing: var(--t-caption-strong-ls); }
.t-fine        { font-family: var(--font-text); font-size: var(--t-fine-size); font-weight: var(--t-fine-weight); line-height: var(--t-fine-lh); letter-spacing: var(--t-fine-ls); }
.t-micro       { font-family: var(--font-text); font-size: var(--t-micro-size); font-weight: var(--t-micro-weight); line-height: var(--t-micro-lh); letter-spacing: var(--t-micro-ls); }