/* ============================================================ MATIOS UI — matios-ui-mode-ember.css v1.0.0 Mode: Ember — near-black backgrounds tinted warm red (ember glow) Apply with: ============================================================ */ [data-mts-mode="ember"] { /* ── Primary (ember red, tonal — overridable by accents) ─ */ --mts-color-primary: #f15a47; --mts-color-primary-hover: #e04832; --mts-color-primary-active: #c93c28; --mts-color-primary-light: rgba(241,90,71,.14); --mts-color-primary-text: #ffffff; --mts-btn-shadow-primary: 0 4px 14px rgba(241,90,71,.40); --mts-btn-ring-primary: 0 0 0 3px rgba(241,90,71,.28); --mts-border-color-focus: #f15a47; /* ── Accent (secondary decorative color) ─────────────── */ --mts-color-accent: #fb923c; --mts-color-accent-hover: #f97316; --mts-color-accent-text: #150a0d; /* ── Semantic colors ──────────────────────────────────── */ --mts-color-success: #34d399; --mts-color-success-hover: #10b981; --mts-color-success-light: rgba(52,211,153,.12); --mts-color-success-text: #ffffff; --mts-color-warning: #fbbf24; --mts-color-warning-light: rgba(251,191,36,.12); --mts-color-danger: #f87171; --mts-color-danger-light: rgba(248,113,113,.12); --mts-color-info: #38bdf8; --mts-color-info-light: rgba(56,189,248,.12); /* ── Gray scale (red-tinted) ──────────────────────────── */ --mts-gray-50: #150a0d; --mts-gray-100: #1e0f13; --mts-gray-200: #29161b; --mts-gray-300: #43242c; --mts-gray-400: #58323b; --mts-gray-500: #9b6f78; --mts-gray-600: #bb8e97; --mts-gray-700: #d4afb6; --mts-gray-800: #e8d2d7; --mts-gray-900: #f3e6e9; /* ── Backgrounds ──────────────────────────────────────── */ --mts-bg-body: #150a0d; --mts-bg-surface: #1e0f13; --mts-bg-surface-2: #29161b; --mts-bg-overlay: rgba(0,0,0,.65); /* ── Text ─────────────────────────────────────────────── */ --mts-text-primary: #f3e6e9; --mts-text-secondary: #c8a0a8; --mts-text-muted: #9b6f78; --mts-text-disabled: #6b454d; --mts-text-inverse: #150a0d; /* ── Borders ──────────────────────────────────────────── */ --mts-border-color: #43242c; --mts-border-color-strong: #58323b; /* ── Shadows ──────────────────────────────────────────── */ --mts-shadow-xs: 0 1px 2px rgba(0,0,0,.3); --mts-shadow-sm: 0 1px 4px rgba(0,0,0,.4); --mts-shadow-md: 0 2px 10px rgba(0,0,0,.5); --mts-shadow-lg: 0 4px 20px rgba(0,0,0,.6); --mts-shadow-xl: 0 8px 40px rgba(0,0,0,.7); /* ── Button shadows (semantic) ────────────────────────── */ --mts-btn-shadow-danger: 0 4px 14px rgba(248,113,113,.38); --mts-btn-ring-danger: 0 0 0 3px rgba(248,113,113,.26); --mts-btn-shadow-success: 0 4px 14px rgba(52,211,153,.36); --mts-btn-ring-success: 0 0 0 3px rgba(52,211,153,.24); --mts-btn-shadow-warning: 0 4px 14px rgba(251,191,36,.36); --mts-btn-ring-warning: 0 0 0 3px rgba(251,191,36,.24); --mts-font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }