/* ============================================================
 * NFTLox Playground — Theme
 * Edit ONLY this file to change colors / typography.
 * Light mode variables + dark mode override via .dark class.
 * ============================================================ */

:root {
	/* --- Palette tokens --- */
	--background:              oklch(0.9574 0.0107 286.1966);
	--foreground:              oklch(0.2924 0.0365 279.4667);
	--card:                    oklch(1.0000 0 0);
	--card-foreground:         oklch(0.2924 0.0365 279.4667);
	--muted:                   oklch(0.8974 0.0136 286.1234);
	--muted-foreground:        oklch(0.4391 0.0327 284.9746);
	--primary:                 oklch(0.6490 0.1055 190.8291);
	--primary-foreground:      oklch(0.9574 0.0107 286.1966);
	--secondary:               oklch(0.9145 0.1056 113.5472);
	--secondary-foreground:    oklch(0.2924 0.0365 279.4667);
	--destructive:             oklch(0.5604 0.2048 26.9830);
	--destructive-foreground:  oklch(1.0000 0 0);
	--border-token:            oklch(0.8400 0.0180 286.0000);
	--sidebar-bg:              oklch(0.2924 0.0365 279.4667);
	--sidebar-fg:              oklch(0.9574 0.0107 286.1966);

	--shadow-sm: 0px 4px 10px 0px hsl(234.5455 21.5686% 20% / 0.10);
	--shadow-md: 0px 4px 10px 0px hsl(234.5455 21.5686% 20% / 0.20), 0px 2px 4px -1px hsl(234.5455 21.5686% 20% / 0.20);

	--mono: "JetBrains Mono", monospace;
	--sans: "Space Grotesk", system-ui, sans-serif;

	/* --- Component aliases (used throughout styles.css) --- */
	--bg:              var(--background);
	--surface:         var(--card);
	--surface-2:       var(--muted);
	--border:          var(--border-token);
	--border-hover:    var(--primary);
	--text:            var(--foreground);
	--text-muted:      var(--muted-foreground);
	--text-dim:        oklch(0.6200 0.0300 284.9746);
	--accent:          var(--primary);
	--accent-strong:   oklch(0.5500 0.1055 190.8291);
	--accent-dim:      oklch(0.6490 0.1055 190.8291 / 0.12);
	--accent-soft:     oklch(0.9145 0.1056 113.5472 / 0.14);
	--accent-secondary: var(--secondary);
	--error:           var(--destructive);
	--warning:         oklch(0.7200 0.1500 85.0000);
	--success:         oklch(0.5500 0.1500 142.0000);
	--success-dim:     oklch(0.5500 0.1500 142.0000 / 0.14);
}

.dark {
	/* --- Palette tokens (dark) --- */
	--background:              oklch(0.2924 0.0365 279.4667);
	--foreground:              oklch(0.9574 0.0107 286.1966);
	--card:                    oklch(0.3335 0.0406 280.1041);
	--card-foreground:         oklch(0.9574 0.0107 286.1966);
	--muted:                   oklch(0.3718 0.0395 280.4249);
	--muted-foreground:        oklch(0.7444 0.0285 285.6862);
	--primary:                 oklch(0.9145 0.1056 113.5472);
	--primary-foreground:      oklch(0.2924 0.0365 279.4667);
	--secondary:               oklch(0.6490 0.1055 190.8291);
	--secondary-foreground:    oklch(0.9574 0.0107 286.1966);
	--destructive:             oklch(0.6763 0.2115 24.8106);
	--destructive-foreground:  oklch(1.0000 0 0);
	--border-token:            oklch(0.4500 0.0350 280.0000);
	--sidebar-bg:              oklch(0.2504 0.0342 278.7389);
	--sidebar-fg:              oklch(0.9574 0.0107 286.1966);

	--shadow-sm: 0px 6px 15px 0px hsl(0 0% 0% / 0.50), 0px 1px 2px -1px hsl(0 0% 0% / 0.50);
	--shadow-md: 0px 6px 15px 0px hsl(0 0% 0% / 0.50), 0px 2px 4px -1px hsl(0 0% 0% / 0.50);

	/* --- Component aliases (dark) --- */
	--bg:              var(--background);
	--surface:         var(--card);
	--surface-2:       var(--muted);
	--border:          var(--border-token);
	--border-hover:    var(--primary);
	--text:            var(--foreground);
	--text-muted:      var(--muted-foreground);
	--text-dim:        oklch(0.5800 0.0280 285.0000);
	--accent:          var(--primary);
	--accent-strong:   oklch(0.8200 0.1200 113.5472);
	--accent-dim:      oklch(0.9145 0.1056 113.5472 / 0.15);
	--accent-soft:     oklch(0.6490 0.1055 190.8291 / 0.18);
	--accent-secondary: var(--secondary);
	--error:           var(--destructive);
	--warning:         oklch(0.7800 0.1500 85.0000);
	--success:         oklch(0.6500 0.1500 142.0000);
	--success-dim:     oklch(0.6500 0.1500 142.0000 / 0.18);
}