/* ============================================================================
   ELYTRA — Design Tokens: Color, Type, Spacing, Radius, Shadow, Motion
   Cross-border payment & FX-liquidity infrastructure.
   PALETTE: monochrome — black & white only. No hue anywhere.
   Import this file first in any Elytra surface.
   ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@300;400;500;600;700&family=Hanken+Grotesk:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
  /* ----------------------------------------------------------------- BRAND */
  /* The brand color is black. There is no accent hue — contrast is the system. */
  --black: #000000;
  --white: #FFFFFF;

  --brand:        #111111;          /* near-black — primary actions, logo */
  --brand-hover:  #000000;          /* deepen on hover */
  --brand-press:  #2A2A2A;          /* lift on press */
  --brand-tint:   #F4F4F4;          /* faint wash behind brand content */

  /* -------------------------------------------------------------- NEUTRALS */
  /* Pure neutral greys — true tints of black, zero hue. The whole palette. */
  --ink-950: #000000;   /* pure black */
  --ink-900: #141414;
  --ink-800: #232323;
  --ink-700: #333333;
  --ink-600: #4D4D4D;
  --ink-500: #6E6E6E;   /* muted / secondary text */
  --ink-400: #909090;
  --ink-300: #B5B5B5;
  --ink-200: #D6D6D6;
  --ink-100: #E8E8E8;
  --ink-50:  #F4F4F4;
  --paper:   #FAFAFA;   /* default page background */

  /* ------------------------------------------------------- STATUS (MONO) */
  /* No status hue. Differentiate by FILL / OUTLINE / WEIGHT, not color. */
  --status-solid-bg:   #111111;  --status-solid-fg:   #FFFFFF;  /* settled / positive */
  --status-outline-bd: #111111;  --status-outline-fg: #111111;  /* active / in transit */
  --status-muted-bg:   #E8E8E8;  --status-muted-fg:   #4D4D4D;  /* pending */
  --status-negative-bd:#111111;  --status-negative-fg:#111111;  /* failed (dashed border + icon) */

  /* Legacy semantic aliases — mapped to greys so older refs degrade gracefully.
     Prefer the --status-* treatment tokens above. */
  --success-50:#F4F4F4; --success-500:#111111; --success-700:#000000;
  --warning-50:#F4F4F4; --warning-500:#6E6E6E; --warning-700:#333333;
  --danger-50: #F4F4F4; --danger-500: #111111; --danger-700: #000000;
  --info-50:   #F4F4F4; --info-500:   #111111; --info-700:   #000000;

  /* ----------------------------------------------------- SEMANTIC SURFACES */
  --bg-page:        var(--paper);
  --bg-surface:     var(--white);
  --bg-sunken:      var(--ink-50);
  --bg-inverse:     var(--ink-950);
  --bg-brand:       var(--brand);

  --fg-primary:     var(--ink-950);
  --fg-secondary:   var(--ink-600);
  --fg-muted:       var(--ink-500);
  --fg-on-brand:    var(--white);
  --fg-on-inverse:  var(--paper);
  --fg-brand:       var(--brand);

  --border:         var(--ink-100);   /* hairline */
  --border-strong:  var(--ink-200);
  --border-brand:   var(--brand);

  /* ----------------------------------------------------------- TYPEFACES */
  --font-display: 'Sora', system-ui, sans-serif;          /* engineered, geometric — echoes the wordmark */
  --font-sans:    'Hanken Grotesk', system-ui, sans-serif; /* body & UI */
  --font-mono:    'IBM Plex Mono', ui-monospace, monospace;/* rates, amounts, codes, API */

  /* ----------------------------------------------------------- TYPE SCALE */
  /* size / line-height / weight / tracking — display is intentionally thin. */
  --t-display-2xl: 300 72px/1.02 var(--font-display);
  --t-display-xl:  300 56px/1.05 var(--font-display);
  --t-display-lg:  400 44px/1.08 var(--font-display);
  --t-h1:          500 36px/1.12 var(--font-display);
  --t-h2:          500 28px/1.18 var(--font-display);
  --t-h3:          600 22px/1.26 var(--font-sans);
  --t-h4:          600 18px/1.34 var(--font-sans);
  --t-body-lg:     400 18px/1.6  var(--font-sans);
  --t-body:        400 16px/1.6  var(--font-sans);
  --t-body-sm:     400 14px/1.55 var(--font-sans);
  --t-caption:     500 13px/1.45 var(--font-sans);
  --t-overline:    600 12px/1.4  var(--font-sans);
  --t-mono:        500 14px/1.5  var(--font-mono);

  --tracking-display: -0.025em;
  --tracking-tight:   -0.014em;
  --tracking-normal:  0;
  --tracking-overline: 0.14em;

  /* -------------------------------------------------------------- SPACING */
  --sp-0:0; --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px;
  --sp-6:24px; --sp-8:32px; --sp-10:40px; --sp-12:48px; --sp-16:64px;
  --sp-20:80px; --sp-24:96px; --sp-32:128px;

  /* ----------------------------------------------------------------- RADII */
  --r-xs:4px; --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:24px; --r-2xl:32px;
  --r-pill:999px;

  /* --------------------------------------------------------------- SHADOWS */
  /* Soft, low-spread, neutral black. Elevation by blur, not darkness. */
  --shadow-xs: 0 1px 2px rgba(0,0,0,.05);
  --shadow-sm: 0 1px 3px rgba(0,0,0,.07), 0 1px 2px rgba(0,0,0,.05);
  --shadow-md: 0 4px 14px rgba(0,0,0,.09);
  --shadow-lg: 0 14px 34px rgba(0,0,0,.12);
  --shadow-xl: 0 28px 64px rgba(0,0,0,.16);
  --shadow-focus: 0 0 0 3px rgba(0,0,0,.30);
  --shadow-brand: 0 10px 30px rgba(0,0,0,.22);

  /* ---------------------------------------------------------------- MOTION */
  --ease-out:   cubic-bezier(.22,.61,.36,1);
  --ease-inout: cubic-bezier(.65,.05,.36,1);
  --dur-fast:   120ms;
  --dur-base:   200ms;
  --dur-slow:   360ms;

  /* ----------------------------------------------------------------- LAYOUT */
  --container:   1200px;
  --container-wide: 1320px;
  --gutter:      24px;
}

/* ===================================================================
   SEMANTIC TYPE CLASSES
   =================================================================== */
.t-display-2xl { font: var(--t-display-2xl); letter-spacing: var(--tracking-display); }
.t-display-xl  { font: var(--t-display-xl);  letter-spacing: var(--tracking-display); }
.t-display-lg  { font: var(--t-display-lg);  letter-spacing: var(--tracking-display); }
.t-h1 { font: var(--t-h1); letter-spacing: var(--tracking-tight); }
.t-h2 { font: var(--t-h2); letter-spacing: var(--tracking-tight); }
.t-h3 { font: var(--t-h3); letter-spacing: -0.008em; }
.t-h4 { font: var(--t-h4); }
.t-body-lg { font: var(--t-body-lg); }
.t-body    { font: var(--t-body); }
.t-body-sm { font: var(--t-body-sm); }
.t-caption { font: var(--t-caption); color: var(--fg-muted); }
.t-overline {
  font: var(--t-overline); letter-spacing: var(--tracking-overline);
  text-transform: uppercase; color: var(--fg-muted);
}
.t-mono { font: var(--t-mono); font-variant-numeric: tabular-nums; }

.t-amount {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}