/**
 * Oniros Digital — Design tokens
 *
 * @package OnirosDigital
 */

:root {
	/* Fondos */
	--od-bg-canvas: #0a0d14;
	--od-bg-surface-1: #111622;
	--od-bg-surface-2: #161d2e;
	--od-bg-input: #0e121b;

	/* Bordes */
	--od-border-subtle: rgba(255, 255, 255, 0.07);
	--od-border-hover: rgba(121, 40, 202, 0.35);
	--od-border-active: #7928ca;

	/* Textos */
	--od-text-primary: #ffffff;
	--od-text-secondary: #94a3b8;
	--od-text-muted: #64748b;
	--od-text-badge: #d8b4fe;

	/* Brand */
	--od-brand-purple: #7928ca;
	--od-brand-purple-glow: #9d4edd;
	--od-brand-cyan: #00d2ff;
	--od-brand-cyan-alt: #38bdf8;
	--od-gradient-brand: linear-gradient(135deg, #7928ca 0%, #00d2ff 100%);
	--od-purple-soft: rgba(121, 40, 202, 0.12);
	--od-purple-soft-border: rgba(121, 40, 202, 0.3);
	--od-glow-purple: 0 0 20px rgba(121, 40, 202, 0.4);

	/* Tipografía */
	--od-font-display: "Plus Jakarta Sans", Inter, system-ui, sans-serif;
	--od-font-body: Inter, system-ui, sans-serif;
	--od-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

	--od-display-h1-size: 56px;
	--od-display-h1-lh: 64px;
	--od-h2-size: 36px;
	--od-h2-lh: 44px;
	--od-h3-size: 22px;
	--od-h3-lh: 28px;
	--od-body-l-size: 18px;
	--od-body-l-lh: 28px;
	--od-body-m-size: 16px;
	--od-body-m-lh: 24px;
	--od-body-s-size: 14px;
	--od-body-s-lh: 20px;
	--od-badge-size: 12px;
	--od-badge-lh: 16px;

	/* Layout */
	--od-container: 1200px;
	--od-gutter: 24px;
	--od-margin: 120px;
	--od-space-section: 120px;
	--od-space-component: 56px;
	--od-space-card: 32px;
	/* Firma: top-left / top-right / bottom-right / bottom-left. La esquina TR siempre es 0. */
	--od-radius-card: 16px 0 16px 16px;
	--od-radius-input: 10px 0 10px 10px;
	--od-radius-btn: 8px 0 8px 8px;
	--od-radius-pill: 999px 0 999px 999px;

	/* Header */
	--od-header-h: 72px;
}

@media (max-width: 1279px) {
	:root {
		--od-margin: 48px;
		--od-space-section: 96px;
	}
}

@media (max-width: 767px) {
	:root {
		--od-margin: 20px;
		--od-space-section: 72px;
		--od-space-component: 40px;
		--od-space-card: 24px;
		--od-display-h1-size: 34px;
		--od-display-h1-lh: 40px;
		--od-h2-size: 28px;
		--od-h2-lh: 34px;
		--od-h3-size: 20px;
		--od-h3-lh: 26px;
		--od-header-h: 72px;
	}
}