/*
 * NeoBankDude design tokens.
 *
 * Values come from docs/DESIGN-SYSTEM.md. Contrast ratios below were measured
 * against the token they are normally paired with; keep them above 4.5:1 for
 * body text and 3:1 for large text and non-text UI.
 */

:root {
  /* Surfaces */
  --nbd-page: #f0f2f3;
  --nbd-surface: #f8faf9;
  --nbd-white: #ffffff;

  /* Text */
  --nbd-ink: #102a43; /* 15.3:1 on --nbd-white */
  --nbd-muted: #52616b; /* 6.6:1 on white, 5.8:1 on --nbd-page */

  /* Action.
   * --nbd-red measures 4.6:1 against white. That clears AA for body text, but
   * only just, so it is used for FILLS with white text on top, never as text
   * on a light surface. For red text on light, use --nbd-red-deep (9.4:1). */
  --nbd-red: #d83a4c;
  --nbd-red-deep: #8c1d2c;

  /* Secondary / data */
  --nbd-teal: #1f6a64; /* 6.1:1 on white */

  /* Structure */
  --nbd-border: #c4cdd3;
  --nbd-border-strong: #9aa7b0;

  /* Status. Deliberately not green/red-only — colour never carries meaning
   * alone, every status also ships a text label. */
  --nbd-status-ok: #1f6a64;
  --nbd-status-warn: #8a5a00;
  --nbd-status-stop: #8c1d2c;
  --nbd-status-neutral: #52616b;

  /* Type. System stack first: no webfont request, no layout shift. */
  --nbd-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --nbd-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
    "Liberation Mono", monospace;

  --nbd-text-xs: 0.75rem; /* 12px — labels only, never body copy */
  --nbd-text-sm: 0.875rem; /* 14px — metadata */
  --nbd-text-base: 1rem; /* 16px — minimum for public body text */
  --nbd-text-lg: 1.125rem;
  --nbd-text-xl: 1.375rem;
  --nbd-text-2xl: 1.75rem;
  --nbd-text-3xl: 2.125rem;

  --nbd-leading-tight: 1.25;
  --nbd-leading-normal: 1.5;

  /* Spacing — 4px base, compact by design */
  --nbd-space-1: 0.25rem;
  --nbd-space-2: 0.5rem;
  --nbd-space-3: 0.75rem;
  --nbd-space-4: 1rem;
  --nbd-space-5: 1.5rem;
  --nbd-space-6: 2rem;
  --nbd-space-7: 3rem;

  /* Radii — limited, per design rules. No pills. */
  --nbd-radius-sm: 2px;
  --nbd-radius: 4px;

  /* Borders are the primary separation device; shadows are not used.
   * A single hairline shadow exists only for sticky overlap. */
  --nbd-hairline: 1px solid var(--nbd-border);
  --nbd-shadow-sticky: 0 1px 0 var(--nbd-border);

  /* Layout */
  --nbd-container: 1180px;
  --nbd-container-narrow: 760px;

  --nbd-focus-ring: 2px solid var(--nbd-red-deep);
  --nbd-focus-offset: 2px;
}