80 lines
2.4 KiB
SCSS
80 lines
2.4 KiB
SCSS
// =============================================================================
|
|
// 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);
|