// =============================================================================
// abstracts/_variables.scss
// CSS Custom Properties + SCSS variables for the 7-1 architecture.
// Bulma 1.x is built on CSS variables, so we map our design tokens here.
// =============================================================================

// --- Colour tokens -----------------------------------------------------------
:root {
	--color-primary:      #00d1b2;
	--color-primary-dark: #00a896;
	--color-dark:         #363636;
	--color-light:        #f5f5f5;
	--color-white:        #ffffff;
	--color-danger:       #f14668;
	--color-warning:      #ffe08a;
	--color-info:         #3e8ed0;
	--color-success:      #48c78e;

	// Semantic surface tokens (flipped in dark mode).
	--color-background:   #ffffff;
	--color-text:         #363636;
	--color-surface:      #f5f5f5;
	--color-border:       #dbdbdb;
	--color-shadow:       rgba(0, 0, 0, 0.1);

	// Navbar
	--navbar-bg:          rgba(255, 255, 255, 0.85);
	--navbar-shadow:      0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);

	// Card
	--card-shadow:        0 2px 8px rgba(0, 0, 0, 0.08);
	--card-shadow-hover:  0 8px 24px rgba(0, 0, 0, 0.14);
	--card-radius:        8px;

	// Typography
	--font-family-base:   'Noto Sans SC', system-ui, -apple-system, sans-serif;
	--font-size-base:     1rem;
	--line-height-base:   1.7;

	// Spacing scale (mirrors theme.json)
	--space-1: 0.25rem;
	--space-2: 0.5rem;
	--space-3: 1rem;
	--space-4: 1.5rem;
	--space-5: 2rem;
	--space-6: 3rem;
	--space-7: 4.5rem;

	// Breakpoints (Bulma defaults)
	--bp-mobile:  768px;
	--bp-tablet:  769px;
	--bp-desktop: 1024px;
	--bp-widescreen: 1216px;

	// Transitions
	--transition-base: 0.3s ease;
}

// Dark mode overrides via data-attribute or media query.
[data-theme='dark'],
@media (prefers-color-scheme: dark) {
	:root {
		--color-background: #1a1a2e;
		--color-text:       #e0e0e0;
		--color-surface:    #16213e;
		--color-border:     #444444;
		--color-shadow:     rgba(0, 0, 0, 0.4);
		--navbar-bg:        rgba(26, 26, 46, 0.9);
		--card-shadow:      0 2px 8px rgba(0, 0, 0, 0.4);
		--card-shadow-hover:0 8px 24px rgba(0, 0, 0, 0.5);
	}
}

// SCSS-only convenience aliases (not emitted as CSS).
$primary:        #00d1b2 !default;
$primary-dark:   #00a896 !default;
$dark:           #363636 !default;
$font-base:      var(--font-family-base);
$transition:     var(--transition-base);