/* ==========================================================================
   MTC Design Library - Live Design Tokens
   Mirrored from /Users/drewbridewell/Documents/MTC_NEW/src/styles.css
   ========================================================================== */

:root {
	--font-display: 'DM Sans', system-ui, sans-serif;
	--font-body: 'DM Sans', system-ui, sans-serif;
	--font-syne: 'Syne', system-ui, sans-serif;
	--font-mono:
		'JetBrains Mono', ui-monospace, 'Cascadia Code', 'Fira Code', monospace;

	--radius: 0.625rem;
	--radius-sm: calc(var(--radius) - 4px);
	--radius-md: calc(var(--radius) - 2px);
	--radius-lg: var(--radius);
	--radius-xl: calc(var(--radius) + 4px);
	--radius-2xl: calc(var(--radius) + 8px);
	--radius-3xl: calc(var(--radius) + 12px);
	--radius-4xl: calc(var(--radius) + 16px);

	--page-max-width: 72rem;

	--background: #f9fafb;
	--foreground: #090a0c;
	--card: #ffffff;
	--card-foreground: #090a0c;
	--popover: #ffffff;
	--popover-foreground: #090a0c;
	--primary: #0081bd;
	--primary-rgb: 0 129 189;
	--primary-hover: #006ea9;
	--primary-active: #00629d;
	--brand: #0081bd;
	--primary-foreground: #fafafa;
	--secondary: #e9ebef;
	--secondary-foreground: #14171e;
	--muted: #e9ebef;
	--muted-rgb: 233 235 239;
	--muted-foreground: #52555e;
	--accent: #e9ebef;
	--accent-rgb: 233 235 239;
	--accent-foreground: #14171e;
	--destructive: #e7000b;
	--destructive-foreground: #fafafa;
	--border: #d7d9dd;
	--border-rgb: 215 217 221;
	--input: #d7d9dd;
	--ring: #0081bd;
	--sidebar: #f4f5f7;
	--sidebar-foreground: #090a0c;
	--sidebar-primary: #0081bd;
	--sidebar-primary-foreground: #fafafa;
	--sidebar-accent: #e3e4e9;
	--sidebar-accent-foreground: #14171e;
	--sidebar-border: #d7d9dd;
	--sidebar-ring: #0081bd;
	--highlight: #fdc700;
	--surface: #f4f5f9;
	--surface-raised: #ffffff;
	--surface-muted: #e9ebf1;
	--surface-selected: #c6ebfc;
	--surface-selected-border: #00a9df;
	--status-info: #cbf2ff;
	--status-info-border: #4fc5fc;
	--status-info-foreground: #003e5e;
	--status-warning: #feedc5;
	--status-warning-border: #f4be4f;
	--status-warning-foreground: #684100;
	--status-danger: #ffe3e2;
	--status-danger-border: #ff8785;
	--status-danger-foreground: #852e2e;
	--status-success: #cff7db;
	--status-success-border: #65c98c;
	--status-success-foreground: #003f1d;

	--shadow-card: 0 1px 2px rgba(9, 10, 12, 0.05), 0 10px 30px rgba(9, 10, 12, 0.06);
	--shadow-elevated: 0 18px 60px rgba(9, 10, 12, 0.12);
}

.dark {
	--background: #020407;
	--foreground: #fafafa;
	--card: #070b0f;
	--card-foreground: #fafafa;
	--popover: #070b0f;
	--popover-foreground: #fafafa;
	--primary: #0081bd;
	--primary-rgb: 0 129 189;
	--primary-hover: #0093d1;
	--primary-active: #00a0de;
	--brand: #0081bd;
	--primary-foreground: #f8f8f8;
	--secondary: #151a1f;
	--secondary-foreground: #fafafa;
	--muted: #151a20;
	--muted-rgb: 21 26 32;
	--muted-foreground: #8a939d;
	--accent: #151a1f;
	--accent-rgb: 21 26 31;
	--accent-foreground: #fafafa;
	--destructive: #ff6467;
	--destructive-foreground: #020407;
	--border: rgba(165, 186, 209, 0.13);
	--border-rgb: 165 186 209;
	--input: rgba(165, 186, 209, 0.16);
	--ring: #0081bd;
	--sidebar: #070b0f;
	--sidebar-foreground: #fafafa;
	--sidebar-primary: #0081bd;
	--sidebar-primary-foreground: #f8f8f8;
	--sidebar-accent: #151a1f;
	--sidebar-accent-foreground: #fafafa;
	--sidebar-border: rgba(165, 186, 209, 0.13);
	--sidebar-ring: #0081bd;
	--highlight: #fdc700;
	--surface: #05090d;
	--surface-raised: #0a0f14;
	--surface-muted: #13191f;
	--surface-selected: #002538;
	--surface-selected-border: #00a8db;
	--status-info: rgba(0, 43, 62, 0.72);
	--status-info-border: rgba(38, 152, 200, 0.6);
	--status-info-foreground: #8eceef;
	--status-warning: rgba(54, 38, 2, 0.78);
	--status-warning-border: rgba(205, 156, 52, 0.58);
	--status-warning-foreground: #f5ca7a;
	--status-danger: rgba(68, 26, 26, 0.74);
	--status-danger-border: rgba(223, 103, 104, 0.58);
	--status-danger-foreground: #ffb4b0;
	--status-success: rgba(11, 46, 26, 0.76);
	--status-success-border: rgba(70, 161, 107, 0.58);
	--status-success-foreground: #95d6ab;

	--shadow-card: 0 1px 2px rgba(0, 0, 0, 0.35), 0 16px 50px rgba(0, 0, 0, 0.28);
	--shadow-elevated: 0 24px 90px rgba(0, 0, 0, 0.45);
}

*,
*::before,
*::after {
	box-sizing: border-box;
	border-color: var(--border);
}

html {
	background: var(--background);
	color: var(--foreground);
}

body {
	margin: 0;
	font-family: var(--font-body);
	background:
		radial-gradient(circle at 82% 12%, rgba(var(--primary-rgb), 0.11), transparent 28rem),
		radial-gradient(circle at 10% 92%, rgba(var(--primary-rgb), 0.08), transparent 26rem),
		var(--background);
	color: var(--foreground);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--font-display);
	line-height: 1.12;
	letter-spacing: -0.035em;
}

a {
	color: inherit;
}

code,
kbd,
pre,
samp {
	font-family: var(--font-mono);
}

body::before {
	content: '';
	position: fixed;
	inset: 0;
	z-index: 9999;
	pointer-events: none;
	mix-blend-mode: overlay;
	opacity: 0.025;
	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
}

.token-card {
	border: 1px solid var(--border);
	border-radius: var(--radius-xl);
	background: var(--surface-raised);
	box-shadow: var(--shadow-card);
}

.token-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	border: 1px solid var(--border);
	border-radius: 999px;
	background: var(--surface);
	color: var(--foreground);
	font-size: 0.8rem;
	font-weight: 600;
	line-height: 1;
	padding: 0.45rem 0.7rem;
}

.token-chip::before {
	content: '';
	width: 0.45rem;
	height: 0.45rem;
	border-radius: 999px;
	background: var(--primary);
}