@import "tailwindcss";
@import "./markup.css";
@import "./pierre.css";

@theme {
	--font-sans: "InterVariable", "system-ui", sans-serif, ui-sans-serif;
	--font-mono:
		"IBMPlexMono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
		"Courier New", monospace;

	/* =========================================================================
	   Semantic color tokens — synced from Figma "Design System" › semantic colors
	   Names mirror the Figma variables verbatim (`/` → `-`). Light-mode values
	   here; dark-mode overrides live in the prefers-color-scheme block below.
	   ========================================================================= */

	/* --- background --- */
	--color-background-default: #ffffff;
	--color-background-subtle: #f9fafb;
	--color-background-inset: #f3f4f6;
	--color-background-muted: #e5e7eb;
	--color-background-strong: #d1d5db;
	--color-background-canvas: #f3f4f6;
	--color-background-highlight: #fef08a;
	--color-background-success-subtle: #dcfce7;
	--color-background-success-subtle-hover: #bbf7d0;
	--color-background-success-emphasis: #16a34a;
	--color-background-success-emphasis-hover: #15803d;
	--color-background-danger-subtle: #ffe2e2;
	--color-background-danger-subtle-hover: #fecaca;
	--color-background-danger-emphasis: #fca5a5;
	--color-background-danger-emphasis-hover: #f87171;
	--color-background-warning-subtle: #fffbeb;
	--color-background-warning-subtle-hover: #fef3c7;
	--color-background-warning-emphasis: #f59e0b;
	--color-background-info-subtle: #eef2ff;
	--color-background-info-subtle-hover: #e0e7ff;
	--color-background-info-emphasis: #4f46e5;
	--color-background-emphasis: #111827;

	/* --- background / navigation ---
	   The settings sidebar aliases *invert* between modes, so these cannot be
	   spelled as an existing pair: light recesses the frame (subtle) and raises
	   the active item (default), dark does the exact opposite. */
	--color-background-navigation-frame: #f9fafb;
	--color-background-navigation-item: #ffffff;

	/* --- foreground --- */
	--color-foreground-default: #111827;
	--color-foreground-muted: #4b5563;
	--color-foreground-subtle: #6b7280;
	--color-foreground-placeholder: #9ca3af;
	--color-foreground-disabled: #d1d5db;
	--color-foreground-on-emphasis: #ffffff;
	--color-foreground-inverted: #f3f4f6;
	--color-foreground-highlight: #854d0e;
	--color-foreground-success: #16a34a;
	--color-foreground-success-strong: #166534;
	--color-foreground-success-disabled: #16a34a80;
	--color-foreground-danger: #dc2626;
	--color-foreground-danger-strong: #991b1b;
	--color-foreground-danger-subtle: #f87171;
	--color-foreground-danger-disabled: #fca5a5;
	--color-foreground-warning: #d97706;
	--color-foreground-warning-strong: #92400e;
	--color-foreground-warning-disabled: #fcd34d;
	--color-foreground-info: #4338ca;
	--color-foreground-info-strong: #3730a3;
	--color-foreground-link-default: #111827;
	--color-foreground-link-hover: #374151;
	--color-foreground-link-disabled: #9ca3af;
	--color-foreground-link-danger: #dc2626;
	--color-foreground-link-danger-hover: #ef4444;
	--color-foreground-link-success: #16a34a;
	--color-foreground-link-success-hover: #22c55e;
	--color-foreground-link-warning: #d97706;
	--color-foreground-link-warning-hover: #f59e0b;
	--color-foreground-link-info: #4f46e5;
	--color-foreground-link-info-hover: #6366f1;

	/* --- border --- */
	--color-border-default: #e5e7eb;
	--color-border-subtle: #f3f4f6;
	--color-border-strong: #d1d5db;
	--color-border-disabled: #e5e7eb;
	--color-border-focus: #9ca3af;
	--color-border-focus-success: #22c55e;
	--color-border-focus-danger: #ef4444;
	--color-border-success: #15803d;
	--color-border-danger: #fca5a5;
	--color-border-danger-subtle: #fecaca;
	--color-border-navigation-item-active: #e5e7eb;

	/* --- shadow (inner depth, eg.: for the button component) --- */
	--color-shadow-inner-strong: #d1d5db;
	--color-shadow-inner-strong-hover: #d1d5db;
	--color-shadow-inner-subtle: #e5e7eb;

	/* --- shadow --- */
	--shadow-small: 0 2px 4px var(--color-alpha-dark-10);
	--shadow-regular: 0 4px 12px var(--color-alpha-dark-5), 0 2px 4px var(--color-alpha-dark-5);
	--shadow-large: 0 6px 16px var(--color-alpha-dark-5), 0 4px 6px var(--color-alpha-dark-5);

	/* --- alpha --- */
	--color-alpha-light-5: color-mix(in srgb, var(--color-background-default) 5%, transparent);
	--color-alpha-light-10: color-mix(in srgb, var(--color-background-default) 10%, transparent);
	--color-alpha-light-15: color-mix(in srgb, var(--color-background-default) 15%, transparent);
	--color-alpha-light-20: color-mix(in srgb, var(--color-background-default) 20%, transparent);
	--color-alpha-light-25: color-mix(in srgb, var(--color-background-default) 25%, transparent);
	--color-alpha-light-30: color-mix(in srgb, var(--color-background-default) 30%, transparent);
	--color-alpha-light-35: color-mix(in srgb, var(--color-background-default) 35%, transparent);
	--color-alpha-light-40: color-mix(in srgb, var(--color-background-default) 40%, transparent);
	--color-alpha-light-45: color-mix(in srgb, var(--color-background-default) 45%, transparent);
	--color-alpha-light-50: color-mix(in srgb, var(--color-background-default) 50%, transparent);
	--color-alpha-light-55: color-mix(in srgb, var(--color-background-default) 55%, transparent);
	--color-alpha-light-60: color-mix(in srgb, var(--color-background-default) 60%, transparent);
	--color-alpha-light-65: color-mix(in srgb, var(--color-background-default) 65%, transparent);
	--color-alpha-light-70: color-mix(in srgb, var(--color-background-default) 70%, transparent);
	--color-alpha-light-75: color-mix(in srgb, var(--color-background-default) 75%, transparent);
	--color-alpha-light-80: color-mix(in srgb, var(--color-background-default) 80%, transparent);
	--color-alpha-light-85: color-mix(in srgb, var(--color-background-default) 85%, transparent);
	--color-alpha-light-90: color-mix(in srgb, var(--color-background-default) 90%, transparent);
	--color-alpha-light-95: color-mix(in srgb, var(--color-background-default) 95%, transparent);

	--color-alpha-dark-5: color-mix(in srgb, var(--color-foreground-default) 5%, transparent);
	--color-alpha-dark-10: color-mix(in srgb, var(--color-foreground-default) 10%, transparent);
	--color-alpha-dark-15: color-mix(in srgb, var(--color-foreground-default) 15%, transparent);
	--color-alpha-dark-20: color-mix(in srgb, var(--color-foreground-default) 20%, transparent);
	--color-alpha-dark-25: color-mix(in srgb, var(--color-foreground-default) 25%, transparent);
	--color-alpha-dark-30: color-mix(in srgb, var(--color-foreground-default) 30%, transparent);
	--color-alpha-dark-35: color-mix(in srgb, var(--color-foreground-default) 35%, transparent);
	--color-alpha-dark-40: color-mix(in srgb, var(--color-foreground-default) 40%, transparent);
	--color-alpha-dark-45: color-mix(in srgb, var(--color-foreground-default) 45%, transparent);
	--color-alpha-dark-50: color-mix(in srgb, var(--color-foreground-default) 50%, transparent);
	--color-alpha-dark-55: color-mix(in srgb, var(--color-foreground-default) 55%, transparent);
	--color-alpha-dark-60: color-mix(in srgb, var(--color-foreground-default) 60%, transparent);
	--color-alpha-dark-65: color-mix(in srgb, var(--color-foreground-default) 65%, transparent);
	--color-alpha-dark-70: color-mix(in srgb, var(--color-foreground-default) 70%, transparent);
	--color-alpha-dark-75: color-mix(in srgb, var(--color-foreground-default) 75%, transparent);
	--color-alpha-dark-80: color-mix(in srgb, var(--color-foreground-default) 80%, transparent);
	--color-alpha-dark-85: color-mix(in srgb, var(--color-foreground-default) 85%, transparent);
	--color-alpha-dark-90: color-mix(in srgb, var(--color-foreground-default) 90%, transparent);
	--color-alpha-dark-95: color-mix(in srgb, var(--color-foreground-default) 95%, transparent);
}

@utility typography-heading-0 {
	font-size: 5rem;
	line-height: 5rem;
	font-weight: 600;
	letter-spacing: -0.25px;
}

@utility typography-heading-1 {
	font-size: 3rem;
	line-height: 3.5rem;
	font-weight: 500;
}

@utility typography-heading-2 {
	font-size: 1.875rem;
	line-height: 1.875rem;
	font-weight: 600;
}

@utility typography-heading-3 {
	font-size: 1.5rem;
	line-height: 1.875rem;
	font-weight: 500;
}

@utility typography-heading-4 {
	font-size: 1.25rem;
	line-height: 1.75rem;
	font-weight: 500;
}

@utility typography-paragraph-large {
	font-size: 1rem;
	line-height: 1.6875rem;
}

@utility typography-paragraph-regular {
	font-size: 0.875rem;
	line-height: 1.5rem;
}

@utility typography-paragraph-small {
	font-size: 0.75rem;
	line-height: 1.25rem;
}

@utility typography-paragraph-mini {
	font-size: 0.625rem;
	line-height: 1rem;
}

@utility typography-monospace-large {
	@apply font-mono;
	font-size: 1rem;
	line-height: 1.5rem;
}

@utility typography-monospace-regular {
	@apply font-mono;
	font-size: 0.875rem;
	line-height: 1.375rem;
}

@utility typography-monospace-small {
	@apply font-mono;
	font-size: 0.75rem;
	line-height: 1.25rem;
}

@layer base {
	@font-face {
		font-family: "InterVariable";
		src: url("/fonts/InterVariable.woff2") format("woff2-variations");
		font-weight: 100 600;
		font-style: normal;
		font-display: swap;
	}

	@font-face {
		font-family: "InterVariable";
		src: url("/fonts/InterVariable-Italic.woff2") format("woff2-variations");
		font-weight: 100 600;
		font-style: italic;
		font-display: swap;
	}

	@font-face {
		font-family: "InterVariable";
		src: url("/fonts/InterDisplay-Bold.woff2") format("woff2");
		font-weight: bold;
		font-style: normal;
		font-display: swap;
	}

	@font-face {
		font-family: "InterVariable";
		src: url("/fonts/InterDisplay-BoldItalic.woff2") format("woff2");
		font-weight: bold;
		font-style: italic;
		font-display: swap;
	}

	@font-face {
		font-family: "IBMPlexMono";
		src: url("/fonts/IBMPlexMono-Regular.woff2") format("woff2");
		font-weight: normal;
		font-style: normal;
		font-display: swap;
	}

	@font-face {
		font-family: "IBMPlexMono";
		src: url("/fonts/IBMPlexMono-Italic.woff2") format("woff2");
		font-weight: normal;
		font-style: italic;
		font-display: swap;
	}

	@font-face {
		font-family: "IBMPlexMono";
		src: url("/fonts/IBMPlexMono-Bold.woff2") format("woff2");
		font-weight: bold;
		font-style: normal;
		font-display: swap;
	}

	@font-face {
		font-family: "IBMPlexMono";
		src: url("/fonts/IBMPlexMono-BoldItalic.woff2") format("woff2");
		font-weight: bold;
		font-style: italic;
		font-display: swap;
	}

	html {
		font-size: 16px;
		scrollbar-gutter: stable;
	}

	@media (prefers-color-scheme: dark) {
		:root {
			/* --- background (Dark) --- */
			--color-background-default: #1f2937;
			--color-background-subtle: #374151;
			--color-background-inset: #374151;
			--color-background-muted: #4b5563;
			--color-background-strong: #6b7280;
			--color-background-canvas: #111827;
			--color-background-highlight: #713f12;
			--color-background-success-subtle: #14532d;
			--color-background-success-subtle-hover: #166534;
			--color-background-success-emphasis: #15803d;
			--color-background-success-emphasis-hover: #166534;
			--color-background-danger-subtle: #7f1d1d;
			--color-background-danger-subtle-hover: #991b1b;
			--color-background-danger-emphasis: #b91c1c;
			--color-background-danger-emphasis-hover: #991b1b;
			--color-background-warning-subtle: #78350f;
			--color-background-warning-subtle-hover: #92400e;
			--color-background-warning-emphasis: #d97706;
			--color-background-info-subtle: #312e81;
			--color-background-info-subtle-hover: #3730a3;
			--color-background-info-emphasis: #4f46e5;
			--color-background-emphasis: #f3f4f6;

			/* --- background / navigation (Dark) --- inverted vs light, see above */
			--color-background-navigation-frame: #1f2937;
			--color-background-navigation-item: #374151;

			/* --- foreground (Dark) --- */
			--color-foreground-default: #f3f4f6;
			--color-foreground-muted: #9ca3af;
			--color-foreground-subtle: #6b7280;
			--color-foreground-placeholder: #9ca3af;
			--color-foreground-disabled: #6b7280;
			--color-foreground-on-emphasis: #ffffff;
			--color-foreground-inverted: #111827;
			--color-foreground-highlight: #fef08a;
			--color-foreground-success: #4ade80;
			--color-foreground-success-strong: #bbf7d0;
			--color-foreground-success-disabled: #15803d;
			--color-foreground-danger: #f87171;
			--color-foreground-danger-strong: #fecaca;
			--color-foreground-danger-disabled: #f87171;
			--color-foreground-warning: #fbbf24;
			--color-foreground-warning-strong: #fde68a;
			--color-foreground-warning-disabled: #fbbf24;
			--color-foreground-info: #818cf8;
			--color-foreground-info-strong: #c7d2fe;
			--color-foreground-link-default: #f3f4f6;
			--color-foreground-link-hover: #d1d5db;
			--color-foreground-link-disabled: #6b7280;
			--color-foreground-link-danger: #ef4444;
			--color-foreground-link-danger-hover: #f87171;
			--color-foreground-link-success: #22c55e;
			--color-foreground-link-success-hover: #4ade80;
			--color-foreground-link-warning: #f59e0b;
			--color-foreground-link-warning-hover: #fbbf24;
			--color-foreground-link-info: #6366f1;
			--color-foreground-link-info-hover: #818cf8;

			/* --- border (Dark) --- */
			--color-border-default: #374151;
			--color-border-subtle: #1f2937;
			--color-border-strong: #6b7280;
			--color-border-disabled: #4b5563;
			--color-border-focus: #d1d5db;
			--color-border-focus-success: #22c55e;
			--color-border-focus-danger: #ef4444;
			--color-border-success: #15803d;
			--color-border-danger: #991b1b;
			--color-border-navigation-item-active: #4b5563;

			/* --- shadow (Dark) --- */
			--color-shadow-inner-strong: #030712;
			--color-shadow-inner-strong-hover: #1f2937;
			--color-shadow-inner-subtle: #111827;
		}
	}

	body {
		@apply flex min-h-screen flex-col bg-background-canvas text-foreground-default transition-colors duration-200;
		font-size: 14px;
	}

	a {
		@apply text-foreground-default no-underline hover:text-foreground-muted;
	}
}