/* ==========================================================================
   MTC Design Library - Design Tokens
   Ported from the app's styles.css (Tailwind v4 / shadcn)
   ========================================================================== */

/* --------------------------------------------------------------------------
   Font Families
   -------------------------------------------------------------------------- */
: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;
}

/* --------------------------------------------------------------------------
   Border Radius Scale
   -------------------------------------------------------------------------- */
:root {
	--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);
}

/* --------------------------------------------------------------------------
   Light Mode (Default)
   -------------------------------------------------------------------------- */
:root {
	--background: oklch(0.985 0.002 270);
	--foreground: oklch(0.145 0.005 270);

	--card: oklch(1 0 0);
	--card-foreground: oklch(0.145 0.005 270);

	--popover: oklch(1 0 0);
	--popover-foreground: oklch(0.145 0.005 270);

	--primary: oklch(0.55 0.17 227);
	--primary-foreground: oklch(0.985 0 0);

	--secondary: oklch(0.94 0.006 270);
	--secondary-foreground: oklch(0.205 0.015 270);

	--muted: oklch(0.94 0.006 270);
	--muted-foreground: oklch(0.45 0.015 270);

	--accent: oklch(0.94 0.006 270);
	--accent-foreground: oklch(0.205 0.015 270);

	--destructive: oklch(0.577 0.245 27.325);

	--border: oklch(0.885 0.006 270);
	--input: oklch(0.885 0.006 270);
	--ring: oklch(0.55 0.17 227);

	--sidebar: oklch(0.97 0.003 270);
	--sidebar-foreground: oklch(0.145 0.005 270);
	--sidebar-primary: oklch(0.55 0.17 227);
	--sidebar-primary-foreground: oklch(0.985 0 0);
	--sidebar-accent: oklch(0.92 0.006 270);
	--sidebar-accent-foreground: oklch(0.205 0.015 270);
	--sidebar-border: oklch(0.885 0.006 270);
	--sidebar-ring: oklch(0.55 0.17 227);
}

/* --------------------------------------------------------------------------
   Dark Mode
   -------------------------------------------------------------------------- */
.dark {
	--background: oklch(0.115 0.005 270);
	--foreground: oklch(0.985 0 0);

	--card: oklch(0.155 0.005 270);
	--card-foreground: oklch(0.985 0 0);

	--popover: oklch(0.155 0.005 270);
	--popover-foreground: oklch(0.985 0 0);

	--primary: oklch(0.72 0.135 227);
	--primary-foreground: oklch(0.98 0 0);

	--secondary: oklch(0.22 0.005 270);
	--secondary-foreground: oklch(0.985 0 0);

	--muted: oklch(0.22 0.008 270);
	--muted-foreground: oklch(0.65 0.01 270);

	--accent: oklch(0.22 0.005 270);
	--accent-foreground: oklch(0.985 0 0);

	--destructive: oklch(0.704 0.191 22.216);

	--border: oklch(1 0 0 / 8%);
	--input: oklch(1 0 0 / 12%);
	--ring: oklch(0.72 0.135 227);

	--sidebar: oklch(0.155 0.005 270);
	--sidebar-foreground: oklch(0.985 0 0);
	--sidebar-primary: oklch(0.72 0.135 227);
	--sidebar-primary-foreground: oklch(0.98 0 0);
	--sidebar-accent: oklch(0.22 0.005 270);
	--sidebar-accent-foreground: oklch(0.985 0 0);
	--sidebar-border: oklch(1 0 0 / 8%);
	--sidebar-ring: oklch(0.72 0.135 227);
}

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

body {
	margin: 0;
	font-family: var(--font-body);
	background-color: 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.2;
}

/* --------------------------------------------------------------------------
   Noise Texture Overlay
   -------------------------------------------------------------------------- */
body::before {
	content: '';
	position: fixed;
	inset: 0;
	z-index: 9999;
	pointer-events: none;
	mix-blend-mode: overlay;
	opacity: 0.03;
	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");
}