/* GT Surfaces — helpers de superficie canónicos.
 *
 * Cada helper consume tokens de gt-tokens.css y nada más. Si un componente
 * necesita una superficie distinta a las cuatro definidas, primero discutir
 * si el sistema debe incorporarla; no crear variantes ad-hoc.
 */

/* ----- Surface levels -----
 * raised   → card base. Sin sombra: la elevación viene del color y la hairline.
 * elevated → sección destacada sobre raised. Sombra stage.
 * overlay  → sheet / popover sobre canvas. Sombra stage + border más visible.
 * floating → modal / dropdown / tooltip. Sombra floating.
 */
.gt-surface-raised {
	background-color: var(--gt-surface-raised);
	border: var(--gt-border-width-hairline) solid var(--gt-border-color-subtle);
	box-shadow: var(--gt-shadow-none);
}

.gt-surface-elevated {
	background-color: var(--gt-surface-elevated);
	border: var(--gt-border-width-hairline) solid var(--gt-border-color-subtle);
	box-shadow: var(--gt-shadow-stage);
}

.gt-surface-overlay {
	background-color: var(--gt-surface-overlay);
	border: var(--gt-border-width-hairline) solid var(--gt-border-color-default);
	box-shadow: var(--gt-shadow-stage);
}

.gt-surface-floating {
	background-color: var(--gt-surface-floating);
	border: var(--gt-border-width-hairline) solid var(--gt-border-color-default);
	box-shadow: var(--gt-shadow-floating);
}

/* ----- Hairlines / dividers ----- */
.gt-hairline {
	border: 0;
	border-top: var(--gt-border-width-hairline) solid var(--gt-border-color-subtle);
	width: 100%;
	margin: 0;
}

.gt-hairline-strong {
	border-top-color: var(--gt-border-color-default);
}

.gt-border-hairline {
	border: var(--gt-border-width-hairline) solid var(--gt-border-color-subtle);
}

.gt-border-default {
	border: var(--gt-border-width-default) solid var(--gt-border-color-default);
}

.gt-border-strong {
	border: var(--gt-border-width-strong) solid var(--gt-border-color-strong);
}

/* ----- Card base ----- */
.gt-card-base {
	background-color: var(--gt-surface-raised);
	border: var(--gt-border-width-hairline) solid var(--gt-border-color-subtle);
	border-radius: var(--gt-radius-lg);
	padding: var(--gt-space-6);
	box-shadow: var(--gt-shadow-stage);
}

/* ----- Glass -----
 * Un único blur canónico. No hay --sm / --lg: el sistema asume que glass
 * tiene UN solo "feel". Si necesitás otro, no es glass, es otra cosa.
 */
.gt-glass {
	background-color: var(--gt-glass-bg);
	border: var(--gt-border-width-hairline) solid var(--gt-glass-border);
	-webkit-backdrop-filter: var(--gt-blur-glass);
	backdrop-filter: var(--gt-blur-glass);
}

/* ----- Grain -----
 * Overlay de ruido sutil para superficies grandes. Opt-in: NO se aplica
 * automáticamente a body ni a ningún selector global. SVG noise inline
 * para no requerir asset externo.
 */
.gt-grain {
	position: relative;
	isolation: isolate;
}

.gt-grain::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 1;
	opacity: 0.06;
	mix-blend-mode: overlay;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='matrix' values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
	background-size: 160px 160px;
	background-repeat: repeat;
}