@import url("https://fonts.googleapis.com/css2?family=Syne:wght@400;500;600;700;800&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700&family=JetBrains+Mono:wght@400;500;600&display=swap");
@import "tailwindcss";
@import "tw-animate-css";
@plugin "@tailwindcss/typography";

/* Path to installed @blocknote/shadcn package for Tailwind class scanning. */
@source "../node_modules/@blocknote/shadcn";

/*
 * BlockNote floating menus (side menu, formatting toolbar, slash menu) render
 * in a portal appended to <body> with z-index: calc(--bn-ui-base-z-index + 20).
 * The task-detail modal panel uses z-50 (z-index: 50). Setting the base to 50
 * ensures all BlockNote menus appear above the modal (50 + 20 = 70).
 *
 * Use `.bn-root.bn-shadcn` (specificity 0,2,0) so this wins over BlockNote's
 * own `.bn-root { --bn-ui-base-z-index: 0 }` rule (0,1,0) regardless of which
 * stylesheet is injected last. The @blocknote/shadcn BlockNoteView always adds
 * the `bn-shadcn` class to the portal element, so this selector always matches.
 */
.bn-root.bn-shadcn {
	--bn-ui-base-z-index: 50;
}

@custom-variant dark (&:is(.dark *));

:root {
	/* ── High-Contrast Minimalism: light ─────────────────────────── */
	--sea-ink: #111111;
	--sea-ink-soft: #666666;
	--lagoon: #5e8f18;
	--lagoon-deep: #426410;
	--palm: #9ed957;
	--sand: #ffffff;
	--foam: #ffffff;
	--surface: rgba(255, 255, 255, 0.97);
	--surface-strong: rgba(255, 255, 255, 1);
	--line: rgba(0, 0, 0, 0.08);
	--inset-glint: rgba(255, 255, 255, 1);
	--kicker: #5a9e1c;
	--bg-base: #ffffff;
	--header-bg: rgba(255, 255, 255, 0.94);
	--chip-bg: rgba(255, 255, 255, 0.98);
	--chip-line: rgba(0, 0, 0, 0.12);
	--link-bg-hover: rgba(248, 255, 236, 0.9);
	--hero-a: rgba(158, 217, 87, 0.09);
	--hero-b: rgba(158, 217, 87, 0.05);

	--background: #ffffff;
	--foreground: #111111;
	--card: #ffffff;
	--card-foreground: #111111;
	--popover: #ffffff;
	--popover-foreground: #111111;
	--primary: #5a9e1c;
	--primary-foreground: #ffffff;
	--secondary: #f0f0f0;
	--secondary-foreground: #111111;
	--muted: #f5f5f5;
	--muted-foreground: #737373;
	--accent: #f0f0f0;
	--accent-foreground: #111111;
	--destructive: oklch(0.577 0.245 27.325);
	--destructive-foreground: oklch(0.577 0.245 27.325);
	--border: #d4d4d4;
	--input: #d4d4d4;
	--ring: #5a9e1c;
	--chart-1: oklch(0.646 0.222 41.116);
	--chart-2: oklch(0.6 0.118 184.704);
	--chart-3: oklch(0.398 0.07 227.392);
	--chart-4: oklch(0.828 0.189 84.429);
	--chart-5: oklch(0.769 0.188 70.08);
	--radius: 0.5rem;
	--sidebar: #ffffff;
	--sidebar-foreground: #111111;
	--sidebar-primary: #5a9e1c;
	--sidebar-primary-foreground: #ffffff;
	--sidebar-accent: #f0f0f0;
	--sidebar-accent-foreground: #111111;
	--sidebar-border: #e8e8e8;
	--sidebar-ring: #5a9e1c;
}

.dark {
	/* ── High-Contrast Minimalism: dark ──────────────────────────── */
	--sea-ink: #f0f0f0;
	--sea-ink-soft: #888888;
	--lagoon: #9ed957;
	--lagoon-deep: #b5e575;
	--palm: #9ed957;
	--sand: #0a0a0a;
	--foam: #0a0a0a;
	--surface: rgba(10, 10, 10, 0.85);
	--surface-strong: rgba(10, 10, 10, 0.95);
	--line: rgba(255, 255, 255, 0.07);
	--inset-glint: rgba(255, 255, 255, 0.04);
	--kicker: #9ed957;
	--bg-base: #0a0a0a;
	--header-bg: rgba(10, 10, 10, 0.9);
	--chip-bg: rgba(17, 17, 17, 0.92);
	--chip-line: rgba(255, 255, 255, 0.1);
	--link-bg-hover: rgba(20, 35, 5, 0.9);
	--hero-a: rgba(158, 217, 87, 0.08);
	--hero-b: rgba(158, 217, 87, 0.04);

	--background: #0a0a0a;
	--foreground: #f0f0f0;
	--card: #111111;
	--card-foreground: #f0f0f0;
	--popover: #111111;
	--popover-foreground: #f0f0f0;
	--primary: #9ed957;
	--primary-foreground: #0a0a0a;
	--secondary: #1e1e1e;
	--secondary-foreground: #f0f0f0;
	--muted: #1a1a1a;
	--muted-foreground: #888888;
	--accent: #1e1e1e;
	--accent-foreground: #f0f0f0;
	--destructive: oklch(0.396 0.141 25.723);
	--destructive-foreground: oklch(0.637 0.237 25.331);
	--border: #2a2a2a;
	--input: #2a2a2a;
	--ring: #9ed957;
	--chart-1: oklch(0.488 0.243 264.376);
	--chart-2: oklch(0.696 0.17 162.48);
	--chart-3: oklch(0.769 0.188 70.08);
	--chart-4: oklch(0.627 0.265 303.9);
	--chart-5: oklch(0.645 0.246 16.439);
	--sidebar: #0a0a0a;
	--sidebar-foreground: #f0f0f0;
	--sidebar-primary: #9ed957;
	--sidebar-primary-foreground: #0a0a0a;
	--sidebar-accent: #1a1a1a;
	--sidebar-accent-foreground: #f0f0f0;
	--sidebar-border: #1e1e1e;
	--sidebar-ring: #9ed957;
}

@theme inline {
	--font-sans: "DM Sans", ui-sans-serif, system-ui, sans-serif;
	--font-mono: "JetBrains Mono", ui-monospace, monospace;
	--color-background: var(--background);
	--color-foreground: var(--foreground);
	--color-card: var(--card);
	--color-card-foreground: var(--card-foreground);
	--color-popover: var(--popover);
	--color-popover-foreground: var(--popover-foreground);
	--color-primary: var(--primary);
	--color-primary-foreground: var(--primary-foreground);
	--color-secondary: var(--secondary);
	--color-secondary-foreground: var(--secondary-foreground);
	--color-muted: var(--muted);
	--color-muted-foreground: var(--muted-foreground);
	--color-accent: var(--accent);
	--color-accent-foreground: var(--accent-foreground);
	--color-destructive: var(--destructive);
	--color-destructive-foreground: var(--destructive-foreground);
	--color-border: var(--border);
	--color-input: var(--input);
	--color-ring: var(--ring);
	--color-chart-1: var(--chart-1);
	--color-chart-2: var(--chart-2);
	--color-chart-3: var(--chart-3);
	--color-chart-4: var(--chart-4);
	--color-chart-5: var(--chart-5);
	--radius-sm: calc(var(--radius) - 4px);
	--radius-md: calc(var(--radius) - 2px);
	--radius-lg: var(--radius);
	--radius-xl: calc(var(--radius) + 4px);
	--color-sidebar: var(--sidebar);
	--color-sidebar-foreground: var(--sidebar-foreground);
	--color-sidebar-primary: var(--sidebar-primary);
	--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
	--color-sidebar-accent: var(--sidebar-accent);
	--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
	--color-sidebar-border: var(--sidebar-border);
	--color-sidebar-ring: var(--sidebar-ring);
}

html,
body,
#root,
#app {
	min-height: 100%;
}

body {
	margin: 0;
	color: var(--sea-ink);
	font-family: var(--font-sans);
	background: var(--background);
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body::before {
	content: "";
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: -1;
	background: none; /* pure white in light mode — no decorative wash */
}

.dark body::before {
	background: radial-gradient(
		ellipse 70% 40% at 50% -5%,
		rgba(158, 217, 87, 0.05),
		transparent
	);
}

body::after {
	content: none; /* dot grid removed — pure surfaces only */
}

a {
	color: var(--lagoon);
	text-decoration-color: rgba(94, 143, 24, 0.35);
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}

a:hover {
	color: var(--lagoon-deep);
}

.dark a {
	color: var(--lagoon);
	text-decoration-color: rgba(158, 217, 87, 0.35);
}

.dark a:hover {
	color: var(--lagoon-deep);
}

code {
	font-size: 0.9em;
	border: 1px solid var(--line);
	background: #f5f5f5;
	border-radius: 4px;
	padding: 2px 7px;
}

.dark code {
	background: #1a1a1a;
	border-color: rgba(255, 255, 255, 0.08);
}

pre code {
	border: 0;
	background: transparent;
	padding: 0;
	border-radius: 0;
	font-size: inherit;
	color: inherit;
}

.prose pre {
	border: 1px solid #e4e4e4;
	border-radius: 6px;
	background: #f5f5f5;
	color: #111111;
}

.dark .prose pre {
	border-color: #2a2a2a;
	background: #111111;
	color: #f0f0f0;
}

.page-wrap {
	width: min(1080px, calc(100% - 2rem));
	margin-inline: auto;
}

.display-title {
	font-family: "Syne", ui-sans-serif, sans-serif;
}

.island-shell {
	border: 1px solid var(--line);
	background: var(--surface-strong);
	box-shadow:
		0 1px 3px rgba(0, 0, 0, 0.07),
		0 1px 2px rgba(0, 0, 0, 0.04);
}

.dark .island-shell {
	box-shadow:
		0 1px 3px rgba(0, 0, 0, 0.6),
		0 1px 2px rgba(0, 0, 0, 0.4);
}

.feature-card {
	background: var(--surface);
	box-shadow:
		0 1px 3px rgba(0, 0, 0, 0.06),
		0 1px 2px rgba(0, 0, 0, 0.04);
}

.feature-card:hover {
	transform: translateY(-1px);
	border-color: rgba(158, 217, 87, 0.4);
	box-shadow:
		0 4px 12px rgba(0, 0, 0, 0.08),
		0 1px 3px rgba(0, 0, 0, 0.04);
}

button,
.island-shell,
a {
	transition:
		background-color 180ms ease,
		color 180ms ease,
		border-color 180ms ease,
		transform 180ms ease;
}

.island-kicker {
	letter-spacing: 0.18em;
	text-transform: uppercase;
	font-weight: 800;
	font-size: 0.69rem;
	color: var(--kicker); /* lime accent */
}

.nav-link {
	position: relative;
	text-decoration: none;
	color: var(--sea-ink-soft);
}

.nav-link::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -8px;
	width: 100%;
	height: 2px;
	transform: scaleX(0);
	transform-origin: left;
	background: var(--palm); /* solid lime indicator */
	transition: transform 170ms ease;
}

.nav-link:hover,
.nav-link.is-active {
	color: var(--sea-ink);
}

.nav-link:hover::after,
.nav-link.is-active::after {
	transform: scaleX(1);
}

.rise-in {
	animation: rise-in 700ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes rise-in {
	from {
		opacity: 0;
		transform: translateY(12px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.site-footer {
	border-top: 1px solid var(--line);
	background: color-mix(in oklab, var(--header-bg) 84%, transparent 16%);
}

@layer base {
	* {
		@apply border-border outline-ring/50;
	}
	body {
		background-color: var(--background);
		color: var(--foreground);
	}
	/* BlockNote shadcn integration — required border styles */
	.bn-shadcn * {
		@apply border-border outline-ring/50;
	}
}

/* BlockNote dark-mode theme — aligned with the High-Contrast Minimalism dark palette */
.dark .bn-root[data-color-scheme="dark"] {
	/* Editor canvas */
	--bn-colors-editor-text: #f0f0f0;
	--bn-colors-editor-background: transparent;

	/* Floating menus / slash menu / side menu dropdowns */
	--bn-colors-menu-text: #f0f0f0;
	--bn-colors-menu-background: #111111;

	/* Tooltips */
	--bn-colors-tooltip-text: #d0d0d0;
	--bn-colors-tooltip-background: #1a1a1a;

	/* Hover state */
	--bn-colors-hovered-text: #f0f0f0;
	--bn-colors-hovered-background: #1e1e1e;

	/* Selected state — lime accent */
	--bn-colors-selected-text: #0a0a0a;
	--bn-colors-selected-background: #9ed957;

	/* Disabled state */
	--bn-colors-disabled-text: #555555;
	--bn-colors-disabled-background: #1a1a1a;

	/* Shadows and borders */
	--bn-colors-shadow: rgba(0, 0, 0, 0.6);
	--bn-colors-border: #2a2a2a;

	/* Side-menu drag handle */
	--bn-colors-side-menu: #888888;
}

/* Make BlockNote side menu buttons smaller - Applied to all instances */
.bn-root .bn-side-menu {
	gap: 2px;
	padding: 2px;
	min-width: 20px;
}

.bn-root .bn-drag-handle-menu svg {
	width: 10px;
	height: 10px;
}

/* Reduce left padding/margin for side menu area */
.bn-root .bn-editor {
	padding-left: 24px;
	padding-right: 24px;
	font-size: 75%;
}

/* Drag handle menu */
.bn-root .bn-drag-handle-menu {
	min-width: 16px;
}

.bn-root .bn-drag-handle-menu button {
	min-width: 16px;
	min-height: 16px;
}

.bn-root .bn-side-menu > button {
	width: 16px;
	height: 16px;
	padding: 3px;
	min-width: 16px;
	min-height: 16px;
	transform: translateY(-4px);
}

.bn-root .bn-side-menu > button svg {
	width: 10px;
	height: 10px;
}

.bn-root .bn-side-menu button svg,
.bn-root .bn-side-menu .bn-side-menu-button svg {
	width: 12px;
	height: 12px;
}

/* Comment display - remove left and right padding */
.bn-comment-display .bn-container {
	padding-left: 0;
	padding-right: 0;
}

.bn-comment-display .bn-editor {
	padding-left: 0;
	padding-right: 0;
}

.bn-comment-display .bn-block-content {
	padding-left: 0;
	padding-right: 0;
}
