@import "tailwindcss";

@theme {
	--font-sans: var(--font-manrope), ui-sans-serif, system-ui, -apple-system, sans-serif;
	--font-display: var(--font-space-grotesk), ui-sans-serif, system-ui, -apple-system, sans-serif;
	--font-mono: var(--font-jetbrains), ui-monospace, SFMono-Regular, Menlo, monospace;

	--radius-md: 0.625rem;
	--radius-lg: 0.875rem;
	--radius-xl: 1.25rem;
	--radius-2xl: 1.75rem;
	--radius-3xl: 2.25rem;

	/* Escalas legadas remapeadas para a identidade atual. As telas internas
	   ainda usam estes nomes; a cor passa a ser consistente sem reescrever
	   cada tabela de uma vez. */
	--color-brand-purple: #0b5c55;
	--color-brand-blue: #0b5c55;
	--color-brand-pink: #8a3b29;

	--color-blue-50: #eaf8f5;
	--color-blue-100: #d2f0ea;
	--color-blue-200: #a8e1d8;
	--color-blue-300: #75cdc1;
	--color-blue-400: #43b3a6;
	--color-blue-500: #1f9588;
	--color-blue-600: #0b5c55;
	--color-blue-700: #094b45;
	--color-blue-800: #083c37;
	--color-blue-900: #072f2b;
	--color-blue-950: #041f1c;

	--color-purple-50: #fbf0ec;
	--color-purple-100: #f7e1da;
	--color-purple-200: #eec3b5;
	--color-purple-300: #e19f89;
	--color-purple-400: #d07a60;
	--color-purple-500: #b95a3f;
	--color-purple-600: #8a3b29;
	--color-purple-700: #723122;
	--color-purple-800: #5c281c;
	--color-purple-900: #472016;
	--color-purple-950: #2a130d;

	--color-indigo-50: #f3f5f8;
	--color-indigo-100: #e7eaf0;
	--color-indigo-200: #d0d6df;
	--color-indigo-300: #aeb7c5;
	--color-indigo-400: #8793a4;
	--color-indigo-500: #697586;
	--color-indigo-600: #515c6c;
	--color-indigo-700: #414a58;
	--color-indigo-800: #333b46;
	--color-indigo-900: #262c35;
	--color-indigo-950: #171b21;

	--color-pink-50: #fbf0ec;
	--color-pink-100: #f7e1da;
	--color-pink-200: #eec3b5;
	--color-pink-300: #e19f89;
	--color-pink-400: #d07a60;
	--color-pink-500: #b95a3f;
	--color-pink-600: #8a3b29;
	--color-pink-700: #723122;
	--color-pink-800: #5c281c;
	--color-pink-900: #472016;
	--color-pink-950: #2a130d;

	--color-teal-50: #eaf8f5;
	--color-teal-100: #d2f0ea;
	--color-teal-200: #a8e1d8;
	--color-teal-300: #75cdc1;
	--color-teal-400: #43b3a6;
	--color-teal-500: #1f9588;
	--color-teal-600: #0b5c55;
	--color-teal-700: #094b45;
	--color-teal-800: #083c37;
	--color-teal-900: #072f2b;
	--color-teal-950: #041f1c;

	--color-emerald-50: #eaf8f5;
	--color-emerald-100: #d2f0ea;
	--color-emerald-200: #a8e1d8;
	--color-emerald-300: #75cdc1;
	--color-emerald-400: #43b3a6;
	--color-emerald-500: #1f9588;
	--color-emerald-600: #0b5c55;
	--color-emerald-700: #094b45;
	--color-emerald-800: #083c37;
	--color-emerald-900: #072f2b;
	--color-emerald-950: #041f1c;

	--color-amber-50: #fdf6e7;
	--color-amber-100: #faebc8;
	--color-amber-200: #f2d894;
	--color-amber-300: #e7bd5c;
	--color-amber-400: #d6a23a;
	--color-amber-500: #b88427;
	--color-amber-600: #93681d;
	--color-amber-700: #765318;
	--color-amber-800: #5e4315;
	--color-amber-900: #493512;
	--color-amber-950: #2b1f0c;
}

/*
 * Tokens semânticos. O tema troca por .dark no <html>, aplicado antes da
 * pintura pelo next-themes. Todos os pares de texto usados no site ficam em
 * 7:1 ou mais (WCAG AAA), inclusive sobre surface e surface-2.
 */
:root {
	color-scheme: light;
	--canvas: #f5f6f8;
	--canvas-deep: #eef0f3;
	--surface: #ffffff;
	--surface-2: #eef0f3;
	--ink: #0b0d10;
	--ink-soft: #262c35;
	--muted: #434a55;
	--faint: #484f5b;
	--line: #e1e4e9;
	--line-strong: #c5cad3;
	--accent: #0a5852;
	--accent-strong: #094b45;
	--accent-contrast: #ffffff;
	--accent-soft: #ebf8f5;
	--copper: #823626;
	--copper-soft: #fbf0ec;
	--teal: #0a5852;
	--teal-soft: #ebf8f5;
	--gold: #5e4300;
	--gold-soft: #fdf6e7;
	--ok: #0f5a35;
	--ok-soft: #e8f6ee;
	--danger: #9b1c1c;
	--danger-soft: #fdeded;
	--code-bg: #07090d;
	--code-ink: #f4f6f8;
	--glow-a: rgb(13 148 136 / 0.1);
	--glow-b: rgb(56 130 246 / 0.07);
	--nav-bg: rgb(255 255 255 / 0.74);
	--hairline: inset 0 1px 0 rgb(255 255 255 / 0.9);
	--shadow-ink: rgb(15 23 42 / 0.07);
	--shadow: 0 2px 4px var(--shadow-ink), 0 14px 32px -8px var(--shadow-ink);
}

.dark {
	color-scheme: dark;
	--canvas: #07090d;
	--canvas-deep: #040609;
	--surface: #0e1218;
	--surface-2: #151b23;
	--ink: #f4f6f8;
	--ink-soft: #d4dae2;
	--muted: #a6afbd;
	--faint: #a6afbd;
	--line: #1c232d;
	--line-strong: #2e3846;
	--accent: #2dd4bf;
	--accent-strong: #5eead4;
	--accent-contrast: #06201d;
	--accent-soft: #10302c;
	--copper: #ffb39b;
	--copper-soft: #331a14;
	--teal: #2dd4bf;
	--teal-soft: #10302c;
	--gold: #fdb022;
	--gold-soft: #2b1f0c;
	--ok: #5fe0a2;
	--ok-soft: #0f2a1c;
	--danger: #ff9b9b;
	--danger-soft: #331517;
	--code-bg: #040609;
	--code-ink: #f4f6f8;
	--glow-a: rgb(45 212 191 / 0.1);
	--glow-b: rgb(56 140 248 / 0.08);
	--nav-bg: rgb(14 18 24 / 0.72);
	--hairline: inset 0 1px 0 rgb(255 255 255 / 0.05);
	--shadow-ink: rgb(0 0 0 / 0.45);
	--shadow: 0 4px 10px var(--shadow-ink), 0 24px 48px -12px var(--shadow-ink);
}

@theme inline {
	--color-canvas: var(--canvas);
	--color-canvas-deep: var(--canvas-deep);
	--color-surface: var(--surface);
	--color-surface-2: var(--surface-2);
	--color-ink: var(--ink);
	--color-ink-soft: var(--ink-soft);
	--color-muted: var(--muted);
	--color-faint: var(--faint);
	--color-line: var(--line);
	--color-line-strong: var(--line-strong);
	--color-accent: var(--accent);
	--color-accent-strong: var(--accent-strong);
	--color-accent-contrast: var(--accent-contrast);
	--color-accent-soft: var(--accent-soft);
	--color-copper: var(--copper);
	--color-copper-soft: var(--copper-soft);
	--color-teal: var(--teal);
	--color-teal-soft: var(--teal-soft);
	--color-gold: var(--gold);
	--color-gold-soft: var(--gold-soft);
	--color-ok: var(--ok);
	--color-ok-soft: var(--ok-soft);
	--color-danger: var(--danger);
	--color-danger-soft: var(--danger-soft);
	--color-code: var(--code-bg);
}

@variant dark (&:where(.dark, .dark *));

@layer base {
	html {
		scroll-behavior: smooth;
		-webkit-text-size-adjust: 100%;
	}

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

	body {
		@apply bg-canvas text-ink;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		text-rendering: optimizeLegibility;
	}

	/* Duas poças de luz fixas: dão profundidade sem textura nem gradiente
	   decorativo dentro do conteúdo. */
	html::before {
		content: "";
		position: fixed;
		inset: 0;
		z-index: -1;
		pointer-events: none;
		background:
			radial-gradient(60rem 36rem at 50% -12%, var(--glow-a), transparent 70%),
			radial-gradient(44rem 30rem at 100% 28%, var(--glow-b), transparent 70%);
	}

	h1,
	h2,
	h3 {
		letter-spacing: -0.03em;
		text-wrap: balance;
		overflow-wrap: break-word;
	}

	p,
	li,
	dd {
		overflow-wrap: break-word;
	}

	p {
		text-wrap: pretty;
	}

	::selection {
		background: var(--accent);
		color: var(--accent-contrast);
	}

	:where(a, button, input, select, textarea, summary):focus-visible {
		outline: 2px solid var(--accent);
		outline-offset: 3px;
		border-radius: 6px;
	}

	::-webkit-scrollbar {
		width: 10px;
		height: 10px;
	}

	::-webkit-scrollbar-track {
		background: var(--canvas);
	}

	::-webkit-scrollbar-thumb {
		background: var(--line-strong);
		border-radius: 999px;
		border: 3px solid var(--canvas);
	}

	::-webkit-scrollbar-thumb:hover {
		background: var(--faint);
	}

	@media (prefers-reduced-motion: reduce) {
		html {
			scroll-behavior: auto;
		}

		*,
		*::before,
		*::after {
			animation-duration: 0.01ms !important;
			animation-iteration-count: 1 !important;
			transition-duration: 0.01ms !important;
		}
	}
}

@layer components {
	.shell {
		width: 100%;
		max-width: 76rem;
		margin-inline: auto;
		padding-inline: clamp(1.25rem, 4vw, 2rem);
	}

	.section {
		padding-block: clamp(3.5rem, 8vw, 7rem);
	}

	.site-canvas {
		background: transparent;
		color: var(--ink);
	}

	.hairline {
		border-color: var(--line);
	}

	.display,
	.page-title {
		font-family: var(--font-display);
		font-weight: 600;
		letter-spacing: -0.04em;
		line-height: 1.03;
		color: var(--ink);
		text-wrap: balance;
	}

	.display {
		font-size: clamp(2.5rem, 1.7rem + 3.8vw, 4.5rem);
	}

	.page-title {
		font-size: clamp(2.25rem, 1.5rem + 3.2vw, 3.75rem);
	}

	.section-title {
		font-family: var(--font-display);
		font-size: clamp(1.625rem, 1.2rem + 1.6vw, 2.5rem);
		font-weight: 600;
		letter-spacing: -0.035em;
		line-height: 1.1;
		color: var(--ink);
		text-wrap: balance;
	}

	.eyebrow {
		display: inline-flex;
		align-items: center;
		gap: 0.5rem;
		font-family: var(--font-sans);
		font-size: 0.875rem;
		line-height: 1.4;
		font-weight: 600;
		letter-spacing: 0;
		text-transform: none;
		color: var(--accent);
	}

	.bench-label {
		font-family: var(--font-sans);
		font-size: 0.75rem;
		font-weight: 600;
		line-height: 1.4;
		letter-spacing: 0;
		text-transform: none;
		color: var(--muted);
	}

	.lede {
		font-size: clamp(1.0625rem, 1rem + 0.5vw, 1.3125rem);
		line-height: 1.6;
		color: var(--muted);
		text-wrap: pretty;
	}

	.muted-copy {
		color: var(--muted);
	}

	.total {
		font-family: var(--font-display);
		font-variant-numeric: tabular-nums;
		letter-spacing: -0.03em;
	}

	/* min-width: 0 evita que um filho largo (chip, URL) estique a célula do grid. */
	.card,
	.panel {
		min-width: 0;
	}

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

	.card-flat {
		background: var(--surface);
		border: 1px solid var(--line);
		border-radius: var(--radius-xl);
	}

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

	.card-interactive {
		transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.25s, box-shadow 0.45s cubic-bezier(0.16, 1, 0.3, 1);
	}

	.card-interactive:hover {
		transform: translateY(-3px);
		border-color: var(--line-strong);
		box-shadow: var(--shadow);
	}

	.panel {
		background: var(--surface);
		border: 1px solid var(--line);
		border-radius: var(--radius-2xl);
		box-shadow: var(--hairline);
	}

	.panel-head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 1rem;
		border-bottom: 1px solid var(--line);
		padding: 1rem 1.25rem;
	}

	.panel-dark {
		background: #0b0d10;
		color: #f4f6f8;
		border: 1px solid #1c232d;
		border-radius: var(--radius-2xl);
		box-shadow: var(--shadow);
	}

	.btn {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 0.5rem;
		min-height: 2.75rem;
		padding: 0.5rem 1.375rem;
		border-radius: 9999px;
		border: 1px solid transparent;
		font-family: var(--font-sans);
		font-size: 0.9375rem;
		font-weight: 600;
		line-height: 1.2;
		text-transform: none;
		letter-spacing: 0;
		text-decoration: none;
		white-space: nowrap;
		cursor: pointer;
		transition: transform 0.35s cubic-bezier(0.34, 1.4, 0.64, 1), background-color 0.2s, border-color 0.2s, box-shadow 0.3s, color 0.2s;
	}

	.btn:active {
		transform: scale(0.97);
	}

	.btn-primary {
		background: var(--accent);
		color: var(--accent-contrast);
		border-color: var(--accent);
	}

	.btn-primary:hover {
		background: var(--accent-strong);
		border-color: var(--accent-strong);
		box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 12%, transparent);
	}

	.btn-ink {
		background: var(--ink);
		color: var(--canvas);
		border-color: var(--ink);
	}

	.btn-ink:hover {
		box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 12%, transparent), var(--shadow);
	}

	.btn-accent {
		background: var(--copper);
		color: #fffaf7;
		border-color: var(--copper);
	}

	.btn-accent:hover {
		background: color-mix(in srgb, var(--copper) 86%, black);
		border-color: color-mix(in srgb, var(--copper) 86%, black);
	}

	.dark .btn-accent {
		color: #1d0b06;
	}

	.btn-ghost {
		background: var(--surface);
		color: var(--ink);
		border-color: var(--line-strong);
	}

	.btn-ghost:hover {
		background: var(--surface-2);
	}

	.btn-sm {
		min-height: 2.75rem;
		padding: 0.375rem 1rem;
		font-size: 0.875rem;
	}

	.btn-icon {
		width: 2.75rem;
		padding: 0;
	}

	.chip {
		display: inline-flex;
		align-items: center;
		gap: 0.375rem;
		padding: 0.25rem 0.75rem;
		border: 1px solid var(--line);
		border-radius: 9999px;
		background: var(--surface);
		color: var(--muted);
		font-family: var(--font-sans);
		font-size: 0.8125rem;
		font-weight: 500;
		letter-spacing: 0;
		line-height: 1.3;
	}

	.chip-accent {
		background: var(--accent-soft);
		border-color: color-mix(in srgb, var(--accent) 24%, transparent);
		color: var(--accent);
	}

	.dark .chip-accent {
		color: var(--accent);
	}

	/* Chip que funciona como controle (filtro, alternância). */
	.chip-btn {
		display: inline-flex;
		align-items: center;
		gap: 0.4rem;
		min-height: 2.75rem;
		padding: 0.375rem 1rem;
		border: 1px solid var(--line-strong);
		border-radius: 9999px;
		background: var(--surface);
		color: var(--ink-soft);
		font-size: 0.875rem;
		font-weight: 500;
		line-height: 1.2;
		cursor: pointer;
		transition: background-color 0.2s, border-color 0.2s, color 0.2s;
	}

	.chip-btn:hover {
		background: var(--surface-2);
	}

	.chip-btn[aria-pressed="true"],
	.chip-btn[aria-selected="true"],
	.chip-btn.is-active {
		background: var(--ink);
		border-color: var(--ink);
		color: var(--canvas);
	}

	/* Bloco de destaque dentro do conteúdo: dica, aviso, exemplo. */
	.callout {
		border: 1px solid var(--line);
		border-left: 3px solid var(--accent);
		border-radius: var(--radius-lg);
		background: var(--surface-2);
		padding: 0.875rem 1rem;
		font-size: 0.875rem;
		line-height: 1.6;
		color: var(--ink-soft);
	}

	.callout-warn {
		border-left-color: var(--gold);
	}

	.callout-danger {
		border-left-color: var(--danger);
	}

	.callout-ok {
		border-left-color: var(--ok);
	}

	/* Número ou dado em destaque dentro de uma grade de fatos. */
	.tile {
		border-radius: var(--radius-xl);
		background: var(--surface-2);
		padding: 0.875rem 1rem;
	}

	.nav-pill {
		background: var(--nav-bg);
		-webkit-backdrop-filter: blur(22px) saturate(1.8);
		backdrop-filter: blur(22px) saturate(1.8);
		border: 1px solid var(--line);
		box-shadow: var(--hairline), var(--shadow);
	}

	.nav-link {
		display: inline-flex;
		align-items: center;
		gap: 0.35rem;
		min-height: 2.75rem;
		padding: 0.5rem 0.875rem;
		border: 0;
		border-radius: 9999px;
		font-family: var(--font-sans);
		font-size: 0.9rem;
		font-weight: 500;
		letter-spacing: 0;
		text-transform: none;
		color: var(--muted);
		text-decoration: none;
		transition: color 0.2s, background-color 0.2s;
	}

	.nav-link:hover {
		color: var(--ink);
		background: var(--surface-2);
	}

	.nav-link[aria-current="page"],
	.nav-link.is-active {
		color: var(--ink);
		background: var(--surface-2);
	}

	.field {
		width: 100%;
		min-height: 2.875rem;
		background: var(--surface);
		border: 1px solid var(--line-strong);
		border-radius: var(--radius-lg);
		color: var(--ink);
		transition: border-color 0.2s, box-shadow 0.2s;
	}

	.field::placeholder {
		color: var(--muted);
		opacity: 0.75;
	}

	.field:focus {
		border-color: var(--accent);
		outline: none;
		box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 15%, transparent);
	}

	.rule {
		height: 1px;
		background: var(--line);
		border: 0;
	}

	.code-panel {
		background: var(--code-bg);
		color: var(--code-ink);
		border: 1px solid #1c232d;
		border-radius: var(--radius-xl);
		overflow: auto;
	}

	.code-panel pre {
		margin: 0;
		padding: 1.1rem 1.25rem;
		font-family: var(--font-mono);
		font-size: 0.75rem;
		line-height: 1.75;
		tab-size: 2;
	}

	.book-cover {
		position: relative;
		aspect-ratio: 2 / 3;
		width: 100%;
		border-radius: 0.5rem 1rem 1rem 0.5rem;
		background: linear-gradient(145deg, #1a1c21 0%, #0b0d10 60%, #5e2418 140%);
		color: #f8fafc;
		box-shadow:
			inset 12px 0 18px -16px rgba(0, 0, 0, 0.9),
			inset -1px 0 0 rgba(255, 255, 255, 0.14),
			0 40px 80px -32px rgba(2, 4, 10, 0.6);
		overflow: hidden;
		isolation: isolate;
		background-size: cover;
		background-position: center;
	}

	.book-cover::after {
		content: "";
		position: absolute;
		inset: 0 auto 0 0;
		width: 10px;
		background: linear-gradient(to right, rgba(0, 0, 0, 0.4), rgba(255, 255, 255, 0.1), transparent);
	}

	.book-spine {
		position: absolute;
		inset: 0 auto 0 0;
		width: 4px;
		background: rgba(255, 247, 239, 0.3);
	}

	.dialog-scrim {
		animation: dialog-fade 0.2s ease-out;
	}

	.dialog-panel {
		animation: dialog-rise 0.3s cubic-bezier(0.16, 1, 0.3, 1);
	}

	@keyframes dialog-fade {
		from { opacity: 0; }
	}

	@keyframes dialog-rise {
		from { opacity: 0; transform: translateY(16px); }
	}

	.no-scrollbar {
		scrollbar-width: none;
	}

	.no-scrollbar::-webkit-scrollbar {
		display: none;
	}

	/* ------------------------------------------------------------------------
	   Tipografia e layout internacionalizados (seção 9b da spec)
	   ------------------------------------------------------------------------ */
	html[lang="zh-CN"] {
		font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", "Noto Sans SC", sans-serif;
		letter-spacing: 0;
		line-height: 1.7;
	}

	html[lang="zh-CN"] code,
	html[lang="zh-CN"] pre,
	html[lang="zh-CN"] kbd {
		font-family: var(--font-mono);
	}

	html[lang="de"],
	html[lang="fr"] {
		hyphens: auto;
	}

	p, li, dd {
		overflow-wrap: anywhere;
	}
}