/**
 * File: assets/css/global/variables.css
 * Description: Global design tokens for Magida Creative Co.
 *
 * MAGIDA FOUNDATION PASS 1:
 * - Defines brand colors, radius scale, spacing, shadows, z-index, and motion tokens.
 */

:root {
	/* MAGIDA FOUNDATION PASS 1: Brand colors. */
	--magida-black: #06070b;
	--magida-black-soft: #0b0d14;
	--magida-panel: rgba(12, 15, 26, 0.78);
	--magida-panel-solid: #0c0f1a;

	--magida-cyan: #05dffe;
	--magida-blue: #1683f4;
	--magida-indigo: #4338f0;
	--magida-violet: #7c6afb;

	--magida-slate: #83909e;
	--magida-silver: #bebde5;
	--magida-white: #fcfdfe;

	/* MAGIDA FOUNDATION PASS 1: Semantic colors. */
	--magida-text: var(--magida-white);
	--magida-text-soft: var(--magida-silver);
	--magida-text-muted: var(--magida-slate);
	--magida-border: rgba(190, 189, 229, 0.16);
	--magida-border-strong: rgba(5, 223, 254, 0.38);

	/* MAGIDA FOUNDATION PASS 1: Gradient tokens. */
	--magida-gradient-primary: linear-gradient(
		135deg,
		var(--magida-cyan),
		var(--magida-blue) 45%,
		var(--magida-violet)
	);
	--magida-gradient-line: linear-gradient(
		90deg,
		var(--magida-cyan),
		var(--magida-blue),
		var(--magida-violet)
	);

	/* MAGIDA FOUNDATION PASS 1: Glow tokens. */
	--magida-glow-soft: 0 0 18px rgba(5, 223, 254, 0.22);
	--magida-glow-medium: 0 0 30px rgba(5, 223, 254, 0.32);
	--magida-glow-violet: 0 0 34px rgba(124, 106, 251, 0.28);

	/* MAGIDA FOUNDATION PASS 1: Typography tokens. */
	--magida-font-heading:
		"Sora", "Space Grotesk", "Plus Jakarta Sans", system-ui, sans-serif;
	--magida-font-body:
		"Inter", "Manrope", system-ui, -apple-system, BlinkMacSystemFont,
		"Segoe UI", sans-serif;

	/* MAGIDA FOUNDATION PASS 1: Radius system. */
	--magida-radius-xs: 4px;
	--magida-radius-sm: 6px;
	--magida-radius-md: 10px;
	--magida-radius-lg: 16px;
	--magida-radius-xl: 22px;
	--magida-radius-full: 999px;

	/* MAGIDA FOUNDATION PASS 1: Layout tokens. */
	--magida-container: 1280px;
	--magida-container-narrow: 860px;
	--magida-section-padding: 96px;
	--magida-section-padding-mobile: 64px;

	/* MAGIDA FOUNDATION PASS 1: Header measurement tokens. */
	--magida-topbar-height: 40px;
	--magida-header-height: 82px;
	--magida-header-height-scrolled: 72px;
	--magida-mobile-header-height: 60px;

	/* MAGIDA FOUNDATION PASS 1: Motion tokens. */
	--magida-transition-fast: 160ms ease;
	--magida-transition: 240ms ease;
	--magida-transition-slow: 420ms ease;

	/* MAGIDA FOUNDATION PASS 1: Z-index scale. */
	--magida-z-header: 900;
	--magida-z-overlay: 1000;
	--magida-z-modal: 1100;
	--magida-z-floating: 850;
}