@import url('https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Cormorant:wght@400;500;600;700&display=swap');

/* ============================================================
   Design tokens — single source of truth for every color in the
   app. Components must consume semantic tokens, never literals.
   Dark is the default theme; [data-theme='light'] overrides.
   ============================================================ */
:root {
	color-scheme: dark;

	/* Surfaces */
	--bg-app: #060607;
	--bg-surface: #101013;
	--bg-raised: #18181c;
	--bg-hover: #222227;
	--bg-active: #2d2d33;
	--bg-backdrop: rgba(0, 0, 0, 0.6);
	--bg-glass: rgba(16, 16, 19, 0.72);
	--scrim: rgba(0, 0, 0, 0.65); /* overlays on photos — theme-invariant */

	/* Text */
	--text-primary: #f5f5f4;
	--text-secondary: #a6a6ad;
	--text-muted: #6f6f78;
	--text-invert: #0d0d10;

	/* Lines */
	--hairline: rgba(255, 255, 255, 0.08);
	--hairline-strong: rgba(255, 255, 255, 0.18);
	--border: 1px solid var(--hairline);

	/* Accent */
	--accent: #56ff7b;
	--accent-hover: #3ed25e;
	--accent-soft: rgba(86, 255, 123, 0.1);
	--on-accent: #052b12;

	/* Status */
	--danger: #ff6b6b;
	--danger-soft: rgba(255, 107, 107, 0.12);
	--warning: #ffd66b;
	--warning-soft: rgba(255, 214, 107, 0.12);

	/* Depth */
	--shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.3), 0 12px 32px -8px rgba(0, 0, 0, 0.55);
	--shadow-float: 0 2px 6px rgba(0, 0, 0, 0.35), 0 24px 64px -16px rgba(0, 0, 0, 0.6);
	--inset-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.06);
	--blur-glass: saturate(1.4) blur(20px);

	/* Motion */
	--ease-out: cubic-bezier(0.32, 0.72, 0, 1);
	--ease-spring: cubic-bezier(0.34, 1.3, 0.5, 1);

	/* Radii */
	--radius-sm: 8px;
	--radius-md: 12px;
	--radius-lg: 16px;
	--radius-xl: 22px;
	--radius-pill: 999px;

	/* Type */
	--text-regular: normal 400 1rem / 1.5 'Archivo';
	--text-small: normal 400 0.8rem 'Archivo';
	--text-heading: 700 3rem 'Cormorant';

	/* Spacing */
	--gap-sm: 4px;
	--gap-md: 8px;
	--gap-lg: 16px;
	--gap-xl: 42px;

	/* Floating navbar: 12px inset + 52px pill + 12px breathing room. */
	--nav-h: 76px;

	/* Legacy aliases — older components reference these names. */
	--bg-primary: var(--bg-app);
	--bg-secondary: var(--bg-surface);
	--bg-secondary-hover: var(--bg-hover);
	--accent-primary: var(--accent);
	--accent-primary-hover: var(--accent-hover);
	--accent-secondary: var(--bg-raised);
	--accent-secondary-hover: var(--bg-hover);
	--bg-error: var(--danger-soft);
	--bg-error-hover: var(--danger-soft);
	--text-error: var(--danger);
	--bg-info: var(--warning-soft);
	--bg-info-hover: var(--warning-soft);
	--text-info: var(--warning);
	--bg-disabled: var(--bg-raised);
	--text-disabled: var(--text-muted);
}

[data-theme='light'] {
	color-scheme: light;

	--bg-app: #f3f3f1;
	--bg-surface: #ffffff;
	--bg-raised: #f4f4f2;
	--bg-hover: #eaeae7;
	--bg-active: #dfdfdb;
	--bg-backdrop: rgba(23, 23, 28, 0.35);
	--bg-glass: rgba(255, 255, 255, 0.78);

	--text-primary: #141417;
	--text-secondary: #5d5d66;
	--text-muted: #8f8f98;
	--text-invert: #fafafa;

	--hairline: rgba(20, 20, 25, 0.08);
	--hairline-strong: rgba(20, 20, 25, 0.2);

	--accent: #0e9f4e;
	--accent-hover: #0c8a44;
	--accent-soft: rgba(14, 159, 78, 0.12);
	--on-accent: #ffffff;

	--danger: #d64545;
	--danger-soft: rgba(214, 69, 69, 0.1);
	--warning: #b07d10;
	--warning-soft: rgba(176, 125, 16, 0.12);

	--shadow-soft: 0 1px 2px rgba(25, 25, 35, 0.05), 0 12px 32px -8px rgba(25, 25, 35, 0.12);
	--shadow-float: 0 2px 6px rgba(25, 25, 35, 0.06), 0 24px 64px -16px rgba(25, 25, 35, 0.18);
	--inset-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

@media (max-width: 768px) {
	:root {
		--nav-h: 70px;
	}
}

* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}
html,
body {
	height: 100%;
	width: 100%;
}
body {
	background-color: var(--bg-app);
	color: var(--text-primary);
	font: var(--text-regular);
	transition: background-color 0.4s var(--ease-out);
}
h1 {
	font: var(--text-heading);
}

::selection {
	background: var(--accent-soft);
	color: var(--text-primary);
}

/* Quiet, hairline scrollbars everywhere. */
* {
	scrollbar-width: thin;
	scrollbar-color: var(--hairline-strong) transparent;
}
*::-webkit-scrollbar {
	width: 8px;
	height: 8px;
}
*::-webkit-scrollbar-thumb {
	background: var(--hairline-strong);
	border-radius: 999px;
}
*::-webkit-scrollbar-track {
	background: transparent;
}