/*
 * HeroAI Design System — colors_and_type.css
 *
 * Drop into any HTML file via:
 *   <link rel="stylesheet" href="colors_and_type.css">
 *
 * Provides:
 *   - Webfont imports (Inter, JetBrains Mono)
 *   - Brand + neutral + semantic CSS variables
 *   - Base type styles
 *   - Common utility classes (.btn, .badge, .card, etc.)
 */


:root {
	/* ---- Type ---- */
	--font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
	--font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Courier New", monospace;
	--font-size: 14px;
	--font-weight-normal: 400;
	--font-weight-medium: 500;
	--font-weight-semibold: 600;

	/* Type scale (Tailwind-ish) */
	--text-xs: 12px;
	--text-sm: 14px;
	--text-base: 14px; /* base is 14, not 16 */
	--text-lg: 16px;
	--text-xl: 20px;
	--text-2xl: 24px;
	--text-3xl: 30px;

	/* ---- Brand ---- */
	--hero-blue: #4bb5e2;
	--hero-teal: #2ebdb5;
	--hero-gradient: linear-gradient(90deg, #4bb5e2 0%, #2ebdb5 100%); /* @kind color */

	/* ---- Neutrals (semantic) ---- */
	--background: #fafafa;
	--foreground: #0a0a0a;
	--card: #ffffff;
	--card-foreground: #0a0a0a;
	--popover: #ffffff;
	--popover-foreground: #0a0a0a;
	--primary: #4bb5e2;
	--primary-foreground: #ffffff;
	--secondary: #f4f4f5;
	--secondary-foreground: #0a0a0a;
	--muted: #f4f4f5;
	--muted-foreground: #71717a;
	--accent: #2ebdb5;
	--accent-foreground: #ffffff;
	--destructive: #e5484d;
	--destructive-foreground: #ffffff;
	--success: #2ebdb5;
	--warning: #f5a524;
	--border: #ebebef;
	--input: transparent;
	--input-background: #ffffff;
	--switch-background: #e4e4e7;
	--ring: #4bb5e2;

	/* ---- Sidebar ---- */
	--sidebar: #ffffff;
	--sidebar-foreground: #0a0a0a;
	--sidebar-primary: #4bb5e2;
	--sidebar-primary-foreground: #ffffff;
	--sidebar-accent: #f4f4f5;
	--sidebar-accent-foreground: #0a0a0a;
	--sidebar-border: #ebebef;
	--sidebar-ring: #4bb5e2;

	/* ---- Tinted-pair semantic palette ---- */
	/* Info / Hero AI */
	--info-border: #BCE2F2;
	--info-bg: #EAF6FB;
	--info-fg: #1B6E91;
	/* Success */
	--success-border: #B5E6DF;
	--success-bg: #E6F7F4;
	--success-fg: #1A6E68;
	/* Warning */
	--warning-border: #F5D9A8;
	--warning-bg: #FEF4E6;
	--warning-fg: #8C5A0E;
	/* Destructive */
	--destructive-border: #F5BFC2;
	--destructive-bg: #FCE9EA;
	--destructive-fg: #e5484d;

	/* ---- Radii ---- */
	--radius: 0.5rem;
	--radius-sm: calc(var(--radius) - 4px); /* 4px */
	--radius-md: calc(var(--radius) - 2px); /* 6px */
	--radius-lg: var(--radius);              /* 8px */
	--radius-xl: calc(var(--radius) + 4px); /* 12px */
	--radius-full: 9999px;

	/* ---- Shadows ---- */
	--shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.04);
	--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05), 0 1px 3px 0 rgba(0, 0, 0, 0.05);
	--shadow-md: 0 4px 8px -2px rgba(0, 0, 0, 0.06), 0 2px 4px -2px rgba(0, 0, 0, 0.04);
	--shadow-lg: 0 10px 20px -4px rgba(0, 0, 0, 0.08), 0 4px 8px -4px rgba(0, 0, 0, 0.06);

	/* ---- Spacing scale ---- */
	--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-12: 48px;
}

html {
	font-size: var(--font-size);
}

body {
	margin: 0;
	font-family: var(--font-sans);
	font-feature-settings: "cv11", "ss01", "ss03";
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	background: var(--background);
	color: var(--foreground);
	font-size: var(--text-base);
	line-height: 1.5;
}

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

/* Base type — semantic tags */
h1 {
	font-size: var(--text-2xl);
	font-weight: var(--font-weight-semibold);
	line-height: 1.5;
	margin: 0;
}
h2 {
	font-size: var(--text-xl);
	font-weight: var(--font-weight-semibold);
	line-height: 1.5;
	margin: 0;
}
h3 {
	font-size: var(--text-lg);
	font-weight: var(--font-weight-semibold);
	line-height: 1.5;
	margin: 0;
}
h4 {
	font-size: var(--text-base);
	font-weight: var(--font-weight-medium);
	line-height: 1.5;
	margin: 0;
}
p {
	font-size: var(--text-base);
	font-weight: var(--font-weight-normal);
	line-height: 1.5;
	margin: 0;
}
label {
	font-size: var(--text-base);
	font-weight: var(--font-weight-medium);
	line-height: 1.5;
}
button {
	font-family: inherit;
	font-size: var(--text-base);
	font-weight: var(--font-weight-medium);
	line-height: 1.5;
}
input, textarea, select {
	font-family: inherit;
	font-size: var(--text-base);
	font-weight: var(--font-weight-normal);
	line-height: 1.5;
}

/* ---- Utility classes (lo-fi shadcn equivalents) ---- */

.muted { color: var(--muted-foreground); }
.fg { color: var(--foreground); }
.text-xs { font-size: var(--text-xs); }
.text-sm { font-size: var(--text-sm); }
.text-base { font-size: var(--text-base); }
.text-lg { font-size: var(--text-lg); }
.text-xl { font-size: var(--text-xl); }
.text-2xl { font-size: var(--text-2xl); }
.font-medium { font-weight: var(--font-weight-medium); }
.font-semibold { font-weight: var(--font-weight-semibold); }

.card {
	background: var(--card);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
}

/* Buttons */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 36px;
	padding: 0 16px;
	border-radius: var(--radius-md);
	font-weight: var(--font-weight-medium);
	font-size: var(--text-sm);
	border: none;
	cursor: pointer;
	transition: background-color 200ms, color 200ms, box-shadow 200ms;
	white-space: nowrap;
	outline: none;
}
.btn-primary {
	background: var(--primary);
	color: var(--primary-foreground);
}
.btn-primary:hover { background: color-mix(in oklab, var(--primary) 90%, black); }
.btn-secondary {
	background: var(--secondary);
	color: var(--secondary-foreground);
}
.btn-secondary:hover { background: color-mix(in oklab, var(--secondary) 80%, black); }
.btn-outline {
	background: var(--card);
	color: var(--foreground);
	border: 1px solid var(--border);
	box-shadow: var(--shadow-xs);
}
.btn-outline:hover { background: var(--secondary); }
.btn-ghost {
	background: transparent;
	color: var(--foreground);
}
.btn-ghost:hover { background: var(--secondary); }
.btn-destructive {
	background: var(--destructive);
	color: var(--destructive-foreground);
}
.btn-sm { height: 32px; padding: 0 12px; font-size: var(--text-xs); }
.btn-lg { height: 40px; padding: 0 24px; }
.btn-icon { width: 36px; padding: 0; }

/* Badges */
.badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	height: 22px;
	padding: 0 8px;
	border-radius: var(--radius-md);
	font-size: var(--text-xs);
	font-weight: var(--font-weight-medium);
	border: 1px solid transparent;
	white-space: nowrap;
}
.badge-pill { border-radius: var(--radius-full); }
.badge-default { background: var(--primary); color: var(--primary-foreground); }
.badge-secondary { background: var(--secondary); color: var(--secondary-foreground); }
.badge-info { border-color: var(--info-border); background: var(--info-bg); color: var(--info-fg); }
.badge-success { border-color: var(--success-border); background: var(--success-bg); color: var(--success-fg); }
.badge-warning { border-color: var(--warning-border); background: var(--warning-bg); color: var(--warning-fg); }
.badge-destructive { border-color: var(--destructive-border); background: var(--destructive-bg); color: var(--destructive-fg); }
.badge-muted { background: var(--muted); color: var(--foreground); }
.badge-outline { border-color: var(--border); color: var(--foreground); background: transparent; }

/* ---- Data provenance badges ---- */
/* Signals where a data point comes from. Two variants, distinguished on TWO
 * independent channels (hue + border style) so they never blur together:
 *   .provenance-observed  — real, measured data. Blue (info), SOLID border.
 *   .provenance-projected — modeled / estimated data. Amber (warning), DASHED border.
 * Label text is contextual ("Based on your inbox", "Measured", "Estimated"…);
 * the visual treatment stays constant. Pair each with its lucide icon:
 *   observed → activity   projected → trending-up
 */
.provenance {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	height: 22px;
	padding: 0 8px;
	border-radius: var(--radius-md);
	font-size: var(--text-xs);
	font-weight: var(--font-weight-medium);
	line-height: 1;
	white-space: nowrap;
	vertical-align: middle;
}
.provenance i[data-lucide] { width: 11px; height: 11px; stroke-width: 2.25; }
.provenance-observed {
	border: 1px solid var(--info-border);
	background: var(--info-bg);
	color: var(--info-fg);
}
.provenance-projected {
	border: 1px dashed var(--warning-border);
	background: var(--warning-bg);
	color: var(--warning-fg);
}

/* ---- Uncertainty range convention ---- */
/* How value ranges + confidence intervals are typeset system-wide.
 * Numerals always in mono (tabular). Use an en-dash (–) between bounds, never a
 * hyphen: "22–31%". A single modeled point estimate takes a leading tilde: "~25%".
 *   .range        — a bounded interval ("22–31%").
 *   .range-approx — a single approximate value ("~25%").
 * By default a range carries a dotted underline in muted colour — the ambient
 * "this value is uncertain" cue for ranges that appear inline in prose with no
 * accompanying badge.
 * .range-bare removes that underline: use it whenever the range sits next to a
 * .provenance-projected badge, so the two treatments don't say "estimate" twice.
 */
.range, .range-approx {
	font-family: var(--font-mono);
	font-weight: var(--font-weight-medium);
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum";
	color: var(--foreground);
	white-space: nowrap;
	border-bottom: 1px dotted var(--muted-foreground);
	padding-bottom: 1px;
}
.range-approx { color: var(--warning-fg); }
.range-bare { border-bottom: none; padding-bottom: 0; }

/* Inputs */
.input {
	height: 36px;
	width: 100%;
	padding: 4px 12px;
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	background: var(--input-background);
	font-size: var(--text-sm);
	box-shadow: var(--shadow-xs);
	outline: none;
	transition: box-shadow 150ms, border-color 150ms;
}
.input:focus { border-color: var(--ring); box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 50%, transparent); }
.input::placeholder { color: var(--muted-foreground); }

/* Avatar */
.avatar {
	width: 40px;
	height: 40px;
	border-radius: var(--radius-full);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--primary);
	color: var(--primary-foreground);
	font-weight: var(--font-weight-semibold);
	font-size: var(--text-sm);
	overflow: hidden;
}
.avatar-sm { width: 28px; height: 28px; font-size: var(--text-xs); }

/* Brand gradient text */
.brand-gradient-text {
	background: var(--hero-gradient);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}