/* honest-router design tokens
   Built on shadcn/ui (neutral) with a verification-first accent system.
   Drop this in alongside shadcn/ui's globals.css. */

@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@400;450;500;600&display=swap');

:root {
  /* ---- shadcn neutral base (light) ---- */
  --background: oklch(1 0 0);
  --foreground: oklch(0.145 0 0);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.145 0 0);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.145 0 0);
  --primary: oklch(0.205 0 0);
  --primary-foreground: oklch(0.985 0 0);
  --secondary: oklch(0.97 0 0);
  --secondary-foreground: oklch(0.205 0 0);
  --muted: oklch(0.97 0 0);
  --muted-foreground: oklch(0.556 0 0);
  --accent: oklch(0.97 0 0);
  --accent-foreground: oklch(0.205 0 0);
  --destructive: oklch(0.577 0.245 27.325);
  --destructive-foreground: oklch(0.985 0 0);
  --border: oklch(0.922 0 0);
  --input: oklch(0.922 0 0);
  --ring: oklch(0.708 0 0);

  /* ---- honest-router accents (semantic) ---- */
  --hr-trust: oklch(0.62 0.13 150);          /* verified ✓, anchored (glyph/border accent) */
  --hr-trust-soft: oklch(0.95 0.04 150);     /* verified pill bg */
  /* DA-12: AA-passing dark trust for text-on-soft and dark-bg button
     contexts. The lighter `--hr-trust` (lightness 0.62) was the source of
     six axe-core color-contrast violations (3.27–3.42:1 vs the required
     4.5:1) when used as text on white or `--hr-trust-soft`. Use this
     token for any text/icon claiming the trust accent against a light
     background, and as the dark-button background under white text. */
  --hr-trust-strong: oklch(0.30 0.12 155);   /* AA-passing trust text/dark-bg */
  --hr-warn: oklch(0.74 0.15 75);            /* degraded provider */
  --hr-warn-soft: oklch(0.96 0.06 80);
  /* AA-passing warn text. --hr-warn (oklch 0.74) on white measures 2.7:1,
     below the 4.5:1 floor for normal text. Darker variant for text-only
     contexts (status numbers, warning labels). */
  --hr-warn-strong: oklch(0.46 0.16 60);
  --hr-error-gateway: oklch(0.55 0.20 25);   /* gateway 5xx — our fault */
  --hr-error-gateway-soft: oklch(0.96 0.05 25);
  --hr-error-upstream: oklch(0.55 0.14 260); /* upstream 5xx — provider's fault */
  --hr-error-upstream-soft: oklch(0.96 0.04 260);

  /* ---- type ---- */
  --font-sans: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, 'JetBrains Mono', 'SF Mono', Menlo, monospace;

  --text-display-size: 56px;
  --text-display-line: 1.05;
  --text-h1-size: 36px;
  --text-h1-line: 1.15;
  --text-h2-size: 24px;
  --text-h2-line: 1.25;
  --text-h3-size: 18px;
  --text-h3-line: 1.35;
  --text-body-size: 14px;
  --text-body-line: 1.5;
  --text-small-size: 13px;
  --text-small-line: 1.45;
  --text-mono-lg-size: 14px;
  --text-mono-size: 13px;
  --text-mono-sm-size: 12px;

  /* ---- spacing & shape ---- */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px;
  --space-14: 56px; --space-20: 80px;

  --radius: 0.625rem;            /* 10px — cards, inputs, dialogs */
  --radius-sm: 0.375rem;         /* 6px — receipt blocks */
  --radius-btn: 0.5rem;          /* 8px — buttons */
  --radius-pill: 9999px;         /* status pills only */

  /* ---- elevation ---- */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.04);
  --shadow-md: 0 4px 12px -2px rgb(0 0 0 / 0.08), 0 2px 4px -2px rgb(0 0 0 / 0.04);

  /* ---- motion ---- */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 80ms;
  --dur: 120ms;
  --dur-slow: 200ms;
}

.dark {
  --background: oklch(0.145 0 0);
  --foreground: oklch(0.985 0 0);
  --card: oklch(0.18 0 0);
  --card-foreground: oklch(0.985 0 0);
  --popover: oklch(0.205 0 0);
  --popover-foreground: oklch(0.985 0 0);
  --primary: oklch(0.985 0 0);
  --primary-foreground: oklch(0.205 0 0);
  --secondary: oklch(0.205 0 0);
  --secondary-foreground: oklch(0.985 0 0);
  --muted: oklch(0.205 0 0);
  --muted-foreground: oklch(0.708 0 0);
  --accent: oklch(0.205 0 0);
  --accent-foreground: oklch(0.985 0 0);
  --destructive: oklch(0.396 0.141 25.723);
  --destructive-foreground: oklch(0.985 0 0);
  --border: oklch(1 0 0 / 0.12);
  --input: oklch(1 0 0 / 0.15);
  --ring: oklch(0.439 0 0);

  --hr-trust: oklch(0.72 0.13 150);
  --hr-trust-soft: oklch(0.28 0.06 150);
  /* Dark-mode `--hr-trust-strong` lifts to a brighter shade so it remains
     readable against a dark background while still passing AA. */
  --hr-trust-strong: oklch(0.85 0.13 150);
  /* Dark-mode warn-strong: brighter than --hr-warn for text on dark bg. */
  --hr-warn-strong: oklch(0.85 0.15 75);
  --hr-warn: oklch(0.78 0.15 75);
  --hr-warn-soft: oklch(0.28 0.06 80);
  --hr-error-gateway: oklch(0.66 0.20 25);
  --hr-error-gateway-soft: oklch(0.28 0.08 25);
  --hr-error-upstream: oklch(0.70 0.14 260);
  --hr-error-upstream-soft: oklch(0.26 0.06 260);
}

/* ---- semantic element styles ---- */

html, body {
  font-family: var(--font-sans);
  font-size: var(--text-body-size);
  line-height: var(--text-body-line);
  color: var(--foreground);
  background: var(--background);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: 'cv11', 'ss01';
}

h1 { font-size: var(--text-h1-size); line-height: var(--text-h1-line); font-weight: 600; letter-spacing: -0.02em; }
h2 { font-size: var(--text-h2-size); line-height: var(--text-h2-line); font-weight: 600; letter-spacing: -0.01em; }
h3 { font-size: var(--text-h3-size); line-height: var(--text-h3-line); font-weight: 600; }
p  { font-size: var(--text-body-size); line-height: var(--text-body-line); text-wrap: pretty; }
small { font-size: var(--text-small-size); color: var(--muted-foreground); }

code, kbd, samp, pre, .mono {
  font-family: var(--font-mono);
  font-size: var(--text-mono-size);
  font-variant-numeric: tabular-nums;
}

.display { font-size: var(--text-display-size); line-height: var(--text-display-line); font-weight: 600; letter-spacing: -0.03em; }

/* tabular numbers in tables by default */
table { font-variant-numeric: tabular-nums; }

/* ---- pills ---- */
.hr-pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: var(--radius-pill);
  font-size: 12px; font-weight: 500; line-height: 1.4;
  border: 1px solid transparent;
}
.hr-pill--trust    { background: var(--hr-trust-soft); color: var(--hr-trust); }
.hr-pill--warn     { background: var(--hr-warn-soft); color: var(--hr-warn); }
.hr-pill--gateway  { background: var(--hr-error-gateway-soft); color: var(--hr-error-gateway); }
.hr-pill--upstream { background: var(--hr-error-upstream-soft); color: var(--hr-error-upstream); }
.hr-pill--neutral  { background: var(--muted); color: var(--muted-foreground); }