/* ============================================================
   tokens.css - fonts and design tokens
   Dark fintech palette. All colors meet WCAG AA on their
   intended surfaces (foam/mist on ink/slate).
   ============================================================ */

@font-face {
  font-family: 'Onest';
  src: url('/assets/fonts/Onest.var.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('/assets/fonts/Inter.var.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'JetBrains Mono';
  src: url('/assets/fonts/JBMono.var.woff2') format('woff2');
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Surfaces */
  --ink: #0A0D12;          /* page background */
  --slate: #101521;        /* raised surface */
  --slate-2: #151B2B;      /* higher surface (widget, cards) */
  --hairline: #1E2634;     /* borders */
  --hairline-2: #2A3446;   /* hover borders */

  /* Text */
  --foam: #E8EDF4;         /* primary text */
  --mist: #8A97AB;         /* secondary text */
  --faint: #5C6677;      /* disabled / faint text */

  /* Accents */
  --cobalt: #3D6DF2;       /* primary action */
  --cobalt-strong: #5A83F5;
  --cobalt-soft: rgba(61, 109, 242, 0.14);
  --sand: #D9B98A;         /* fixed-rate accent */
  --sand-soft: rgba(217, 185, 138, 0.12);

  /* Signals */
  --up: #3FBF7F;
  --down: #E5686D;
  --warn: #E3A24A;
  --warn-soft: rgba(227, 162, 74, 0.12);

  /* Typography */
  --font-head: 'Onest', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-md: 1rem;
  --fs-lg: 1.125rem;
  --fs-xl: 1.375rem;
  --fs-2xl: 1.75rem;
  --fs-3xl: clamp(2rem, 4.5vw, 2.75rem);

  /* Rhythm */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4.5rem;

  /* Shape */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;

  --shadow-card: 0 10px 30px rgba(0, 0, 0, 0.35);
  --shell-max: 74rem;
  --shell-narrow: 46rem;
  --shell-widget: 32rem;

  --focus-ring: 0 0 0 2px var(--ink), 0 0 0 4px var(--cobalt-strong);
}