@use "sass:map";
:root {
// Core brand colors
--color-primary: #5454f8;
--color-secondary: #267B54;
--color-accent: #4088b8;
--color-success: #22c55e;
--color-warning: #f59e0b;
--color-danger: #ef4444;
// Text colors with proper semantic naming
--text-primary: #2c3e50; /* Main text - WCAG AA compliant on white */
--text-secondary: #64748b; /* Supporting text - improved contrast */
--text-tertiary: #94a3b8; /* Muted text */
--text-inverse: #ffffff; /* Text on dark backgrounds */
// Surface colors
--surface-background: #ffffff;
--surface-elevated: #f8fafc; /* Cards, dropdowns */
--surface-overlay: #f1f5f9; /* Modals, overlays */
--surface-interactive: #e2e8f0; /* Hover states */
// Border and outline colors
--border-primary: #e2e8f0; /* Main borders */
--border-secondary: #cbd5e1; /* Subtle borders */
--border-interactive: var(--color-primary); /* Focus, active borders */
// Code and syntax highlighting
--code-background: #f8fafc;
--code-text: #475569;
--code-keyword: #e96900; /* Light theme uses orange */
--code-string: #22c55e;
--code-number: #8b5cf6;
--code-comment: #94a3b8;
// Interactive states using modern color-mix()
--color-primary-hover: color-mix(in srgb, var(--color-primary) 85%, black);
--color-secondary-hover: color-mix(in srgb, var(--color-secondary) 85%, black);
--surface-interactive-hover: color-mix(in srgb, var(--surface-interactive) 80%, var(--color-primary));
// Fluid Typography System using clamp() - Enhanced for better readability
--font-size-body: clamp(1.125rem, 1rem + 0.6vw, 1.375rem); /* ~18px to 22px */
// Fluid Spacing for improved readability
--spacing-paragraph: clamp(1rem, 0.8rem + 0.4vw, 1.5rem); /* 1rem to 1.5rem */
--font-size-h1: clamp(2.25rem, 1.75rem + 2.8vw, 3.5rem); /* ~36px to 56px */
--font-size-h2-h3: clamp(1.5rem, 1.3rem + 1vw, 2.125rem); /* ~24px to 34px */
--font-size-h4-h6: clamp(1.25rem, 1.1rem + 0.75vw, 1.625rem); /* ~20px to 26px */
--font-size-nav: clamp(1rem, 0.95rem + 0.15vw, 1.125rem); /* ~16px to 18px */
--font-size-small: clamp(0.875rem, 0.8rem + 0.3vw, 1rem); /* ~14px to 16px */
--font-size-code: clamp(1rem, 0.95rem + 0.4vw, 1.25rem); /* Increased to match body text better */
}
// Dark theme - Enhanced for WCAG AA compliance
[data-theme="dark"] {
// Brand colors adjusted for dark theme
--color-primary: #818cf8; /* Higher contrast on dark */
--color-secondary: #34d399;
--color-accent: #60a5fa;
--color-success: #10b981;
--color-warning: #f59e0b;
--color-danger: #f87171;
// Text colors - All WCAG AA compliant
--text-primary: #f1f5f9; /* 15.3:1 contrast ratio */
--text-secondary: #cbd5e1; /* 10.4:1 contrast ratio */
--text-tertiary: #94a3b8; /* 6.1:1 contrast ratio */
--text-inverse: #0f172a;
// Surface colors
--surface-background: #0f172a; /* Dark navy for better contrast */
--surface-elevated: #1e293b; /* Elevated surfaces */
--surface-overlay: #334155; /* Overlays and modals */
--surface-interactive: #475569; /* Interactive elements */
// Borders
--border-primary: #334155; /* Visible borders */
--border-secondary: #1e293b; /* Subtle separators */
// Code syntax with proper contrast
--code-background: #1e293b;
--code-text: #e2e8f0;
--code-keyword: #60a5fa;
--code-string: #34d399;
--code-number: #a78bfa;
--code-comment: #64748b;
// Interactive states
--color-primary-hover: color-mix(in srgb, var(--color-primary) 80%, white);
--color-secondary-hover: color-mix(in srgb, var(--color-secondary) 80%, white);
--surface-interactive-hover: color-mix(in srgb, var(--surface-interactive) 70%, var(--color-primary));
}
// Legacy Sass variables for gradual migration
$primary-color: var(--color-primary);
$secondary-color: var(--color-secondary);
$background-color: var(--surface-background);
$text-color: var(--text-primary);
$text-secondary: var(--text-secondary);
$heading-color: var(--text-primary);
$link-color: var(--color-primary);
$code-color: var(--code-keyword);
$border-color: var(--border-primary);
$danger-color: var(--color-danger);
$warning-color: var(--color-warning);
$success-color: var(--color-success);
$info-color: var(--color-primary);
$error-color: var(--color-danger);
$highlight-color: var(--color-accent);
$text-muted: var(--text-tertiary);
$text-dark: var(--text-primary);
$text-light: var(--text-tertiary);
$light-gray: var(--surface-elevated);
$medium-gray: var(--text-secondary);
$dark-gray: var(--text-primary);
$base-font-size: 20px;
$nav-font-size: 17px;
$small-font-size: 0.85em;
$code-font-size: 0.95em;
$h1-font-size: 2.25em;
$h2-font-size: 1.75em;
// Optimized font stacks with CLS mitigation and smart unicode-range loading
// 正文字体：思源宋体 + 西文serif fallback
$serif-font-family: 'Georgia', 'Times New Roman', 'Times', 'Source Han Serif CN', 'Source Han Serif JP', 'Noto Serif SC', 'Source Han Serif SC', 'Noto Serif JP', 'Songti SC', 'SimSun', serif;
// 标题字体：保持黑体/无衬线字体
$heading-font-family: 'Open Sans', 'Open Sans Fallback', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans SC', 'Noto Sans JP', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
// 代码字体：等宽字体
$code-font-family: 'JetBrains Mono', 'SF Mono', Consolas, 'Liberation Mono', Menlo, 'Courier New', 'Source Han Sans SC', 'Source Han Code JP', monospace;
// Legacy 兼容性（保持向后兼容）
$base-font-family: $serif-font-family; // 默认使用serif
$special-font-family: $heading-font-family;
$base-spacing: 1rem;
$large-spacing: 2rem;
$small-spacing: 0.5rem;
$container-width: 700px;
$header-height: 60px;
$header-padding: 20px 100px;
$nav-item-padding: 10px;
$breakpoint-mobile: 699px;
$breakpoint-tablet: 768px;
$breakpoint-desktop: 700px;
$z-index-dropdown: 100;
$z-index-popup: 1000;
$z-index-modal: 2000;
$z-index-overlay: 200;
$transition-duration: 0.3s;
$transition-timing: ease-in-out;
$border-radius: 4px;
$border-width: 1px;
$card-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
$card-shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.15);
$content-width: 1200px;