/* Arion design tokens — ported from arion/src/app/globals.css */
:root {
  --white: #FFFFFF;
  --off-white: #F8F8F7;
  --black: #111111;
  --gray-700: #444444;
  --gray-600: #666666;
  --gray-500: #888888;
  --gray-200: #E5E5E5;
  --gray-100: #F0F0F0;

  --green: #16A34A;
  --green-100: #DCFCE7;
  --amber: #D97706;
  --amber-100: rgba(217, 119, 6, 0.14);
  --red: #DC2626;
  --red-100: rgba(220, 38, 38, 0.12);
  --blue: #2563EB;
  --blue-100: rgba(37, 99, 235, 0.12);

  --accent: #16A34A;
  --accent-2: #DCFCE7;

  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 20px;

  --icon-xs: 12px;
  --icon-sm: 14px;
  --icon-md: 16px;
  --icon-lg: 20px;
  --icon-xl: 22px;
  --icon-2xl: 24px;

  --arion-dot-grid: 20px;
  --arion-dot-radial: radial-gradient(circle, rgba(150, 150, 150, 0.52) 0 0.55px, rgba(150, 150, 150, 0.24) 0.68px 1.08px, transparent 1.28px);
  --arion-dot-wash: radial-gradient(ellipse 78% 64% at 50% 42%, rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0.82) 38%, rgba(255, 255, 255, 0) 72%);
  --arion-dot-wash-off-white: radial-gradient(ellipse 78% 64% at 50% 42%, rgba(248, 248, 247, 0.96) 0%, rgba(248, 248, 247, 0.82) 38%, rgba(248, 248, 247, 0) 72%);
  --arion-dot-bg: var(--arion-dot-wash), var(--arion-dot-radial);
  --arion-dot-bg-off-white: var(--arion-dot-wash-off-white), var(--arion-dot-radial);
  --arion-dot-bg-size: 100% 100%, var(--arion-dot-grid) var(--arion-dot-grid);
  --arion-dot-footer-fade: linear-gradient(to top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.62) 46%, #fff 86%);
  --arion-dot-bg-footer: var(--arion-dot-footer-fade), var(--arion-dot-radial);

  --bg-page: var(--off-white);
  --bg-card: var(--white);
  --border-card: var(--gray-200);
  --radius-card: var(--radius-lg);

  --surface-0: #0B0B0C;
  --surface-1: #17171A;
  --surface-2: #1E1E22;
  --surface-border: #2A2A2F;
  --text-muted: #A1A1A6;

  --font-open-sans: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-jb-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-sans: var(--font-open-sans);
  --font-mono: var(--font-jb-mono);

  --text-display: 700 56px/1.05 var(--font-sans);
  --text-h1:      700 36px/1.15 var(--font-sans);
  --text-h2:      600 24px/1.25 var(--font-sans);
  --text-h3:      600 18px/1.3 var(--font-sans);
  --text-body-lg: 400 16px/1.5 var(--font-sans);
  --text-body:    400 14px/1.6 var(--font-sans);
  --text-button:  500 14px/1 var(--font-sans);
  --text-small:   400 12px/1.5 var(--font-sans);
  --text-label:   500 11px/1.2 var(--font-sans);
  --text-title:   var(--text-h1);
  --text-heading: var(--text-h3);
  --text-subhead: 600 14px/1.4 var(--font-sans);
}

html, body {
  height: 100%;
  margin: 0;
  background: var(--bg-page);
  color: var(--black);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

*, *::before, *::after { box-sizing: border-box; }

a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }
button { font: inherit; }

.arion-dot-bg {
  background-color: var(--white);
  background-image: var(--arion-dot-bg);
  background-size: var(--arion-dot-bg-size);
}
.arion-dot-bg--off-white {
  background-color: var(--off-white);
  background-image: var(--arion-dot-bg-off-white);
  background-size: var(--arion-dot-bg-size);
}
.arion-dot-bg--footer {
  background-color: var(--white);
  background-image: var(--arion-dot-bg-footer);
  background-size: var(--arion-dot-bg-size);
}