/* ============================================================ MATIOS UI — matios-ui-mode-light.css v3.0.0 Mode: Light — clean light backgrounds Apply with: ============================================================ */ [data-mts-mode="light"] { /* ── Primary (default blue — overridden by accent files) ─ */ --mts-color-primary: #2563eb; --mts-color-primary-hover: #1d4ed8; --mts-color-primary-active: #1e40af; --mts-color-primary-light: rgba(37,99,235,.1); --mts-color-primary-text: #ffffff; --mts-btn-shadow-primary: 0 4px 14px rgba(37,99,235,.32); --mts-btn-ring-primary: 0 0 0 3px rgba(37,99,235,.2); --mts-border-color-focus: #2563eb; /* ── Accent (secondary decorative color) ─────────────── */ --mts-color-accent: #7c3aed; --mts-color-accent-hover: #6d28d9; --mts-color-accent-text: #ffffff; /* ── Semantic colors ──────────────────────────────────── */ --mts-color-success: #059669; --mts-color-success-hover: #047857; --mts-color-success-light: rgba(5,150,105,.1); --mts-color-success-text: #ffffff; --mts-color-warning: #d97706; --mts-color-warning-light: rgba(217,119,6,.1); --mts-color-danger: #dc2626; --mts-color-danger-light: rgba(220,38,38,.1); --mts-color-info: #0284c7; --mts-color-info-light: rgba(2,132,199,.1); /* ── Gray scale ───────────────────────────────────────── */ --mts-gray-50: #f9fafb; --mts-gray-100: #f3f4f6; --mts-gray-200: #e5e7eb; --mts-gray-300: #d1d5db; --mts-gray-400: #9ca3af; --mts-gray-500: #6b7280; --mts-gray-600: #4b5563; --mts-gray-700: #374151; --mts-gray-800: #1f2937; --mts-gray-900: #111827; /* ── Backgrounds ──────────────────────────────────────── */ --mts-bg-body: #f4f6fb; --mts-bg-surface: #ffffff; --mts-bg-surface-2: #f0f2f8; --mts-bg-overlay: rgba(0,0,0,.4); /* ── Text ─────────────────────────────────────────────── */ --mts-text-primary: #111827; --mts-text-secondary: #374151; --mts-text-muted: #6b7280; --mts-text-disabled: #9ca3af; --mts-text-inverse: #ffffff; /* ── Borders ──────────────────────────────────────────── */ --mts-border-color: #e2e5ef; --mts-border-color-strong: #c7cce0; /* ── Shadows ──────────────────────────────────────────── */ --mts-shadow-xs: 0 1px 2px rgba(0,0,0,.05); --mts-shadow-sm: 0 1px 4px rgba(0,0,0,.08); --mts-shadow-md: 0 2px 10px rgba(0,0,0,.1); --mts-shadow-lg: 0 4px 20px rgba(0,0,0,.12); --mts-shadow-xl: 0 8px 40px rgba(0,0,0,.15); /* ── Button shadows (semantic) ────────────────────────── */ --mts-btn-shadow-danger: 0 4px 14px rgba(220,38,38,.3); --mts-btn-ring-danger: 0 0 0 3px rgba(220,38,38,.18); --mts-btn-shadow-success: 0 4px 14px rgba(5,150,105,.3); --mts-btn-ring-success: 0 0 0 3px rgba(5,150,105,.18); --mts-btn-shadow-warning: 0 4px 14px rgba(217,119,6,.3); --mts-btn-ring-warning: 0 0 0 3px rgba(217,119,6,.18); --mts-font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }