/* ==========================================================================
   Frunză Atelier — design tokens
   Ported from the Chantan platform foundation. These custom properties are
   consumed by assets/css/atelier.css via hsl(var(--token)).
   ========================================================================== */

:root {
	/* Surfaces — warm, slightly off-white paper */
	--background: 222 30% 97%;
	--foreground: 222 28% 13%;
	--header-fg-transparent: var(--foreground);
	--primary-on-media: 222 55% 82.4%;
	--primary-on-media-foreground: 222 28% 13%;

	--card: 222 30% 97%;
	--card-foreground: 222 28% 13%;

	--popover: 222 30% 97%;
	--popover-foreground: 222 28% 13%;

	/* Brand action colour — refined indigo */
	--primary: 222 55% 40%;
	--primary-foreground: 222 30% 98%;

	--secondary: 240 14% 96%;
	--secondary-foreground: 240 18% 14%;

	--muted: 222 20% 94%;
	--muted-foreground: 240 8% 44%;

	--accent: 20 55% 92%;
	--accent-foreground: 20 55% 30%;

	--destructive: 0 72% 51%;
	--destructive-foreground: 0 0% 100%;

	--success: 152 56% 40%;
	--success-foreground: 0 0% 100%;

	--border: 222 20% 88%;
	--input: 240 16% 90%;
	--ring: 222 55% 40%;

	--radius: 0.4rem;

	--shadow-sm: 0 1px 2px 0 hsl(240 30% 12% / 0.04), 0 1px 3px 0 hsl(240 30% 12% / 0.06);
	--shadow-md: 0 2px 4px -1px hsl(240 30% 12% / 0.06), 0 8px 16px -4px hsl(240 30% 12% / 0.08);
	--shadow-lg: 0 4px 8px -2px hsl(240 30% 12% / 0.07), 0 20px 40px -8px hsl(240 30% 12% / 0.12);
	--shadow-xl: 0 8px 16px -4px hsl(240 30% 12% / 0.08), 0 32px 64px -12px hsl(240 30% 12% / 0.16);

	--sidebar-background: 40 30% 98%;
	--sidebar-foreground: 240 10% 26%;
	--sidebar-primary: 243 68% 56%;
	--sidebar-primary-foreground: 0 0% 100%;
	--sidebar-accent: 240 14% 95%;
	--sidebar-accent-foreground: 240 18% 14%;
	--sidebar-border: 240 16% 90%;
	--sidebar-ring: 243 68% 56%;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
html {
	scroll-behavior: smooth;
}

body {
	font-family: var(--font-sans, "DM Sans", sans-serif);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-display, "Bodoni Moda", Georgia, serif);
	font-weight: 500;
	text-wrap: balance;
}

p {
	text-wrap: pretty;
}

::selection {
	background-color: hsl(var(--primary) / 0.18);
	color: hsl(var(--foreground));
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
	background: hsl(var(--muted-foreground) / 0.30);
	border-radius: 9999px;
	border: 2px solid transparent;
	background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
	background: hsl(var(--muted-foreground) / 0.50);
	background-clip: padding-box;
}

/* --------------------------------------------------------------------------
   On-media scope — anything layered over a photo or dark scrim
   -------------------------------------------------------------------------- */
.on-media {
	--background: 0 0% 7%;
	--foreground: 0 0% 100%;
	--card: 0 0% 10%;
	--card-foreground: 0 0% 100%;
	--popover: 0 0% 10%;
	--popover-foreground: 0 0% 100%;
	--primary: var(--primary-on-media, 0 0% 100%);
	--primary-foreground: var(--primary-on-media-foreground, 0 0% 8%);
	--secondary: 0 0% 16%;
	--secondary-foreground: 0 0% 100%;
	--muted: 0 0% 16%;
	--muted-foreground: 0 0% 82%;
	--accent: 0 0% 20%;
	--accent-foreground: 0 0% 100%;
	--border: 0 0% 82%;
	--input: 0 0% 82%;
	--ring: 0 0% 100%;
	color: hsl(var(--foreground));
}

/* --------------------------------------------------------------------------
   Composable premium helpers
   -------------------------------------------------------------------------- */
.glass {
	background-color: hsl(var(--background) / 0.65);
	backdrop-filter: saturate(180%) blur(12px);
	-webkit-backdrop-filter: saturate(180%) blur(12px);
}

.hover-lift {
	transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
.hover-lift:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-lg);
}

/* Scroll reveal — visible by default; only hidden once JS confirms it can reveal. */
.reveal { opacity: 1; }
.reveal-js .reveal {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal-js .reveal.is-visible { opacity: 1; transform: none; }