/* ======================================================================= MMIA – Design System / Theme Tokens Usado por todas as páginas. Incluir no de cada página. ======================================================================= */ /* ── 1. RESET & BASE ──────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } /* ── 2. LIGHT MODE (default) ──────────────────────────────────────────── */ :root, [data-theme="light"] { /* Background */ --bg-primary: #ffffff; --bg-secondary: #f9fafb; --bg-tertiary: #f3f4f6; --bg-card: #ffffff; --bg-sidebar: #f1f5f9; --bg-header: #ffffff; /* Text */ --text-primary: #111827; --text-secondary: #6b7280; --text-tertiary: #9ca3af; --text-inverse: #ffffff; /* Borders & Dividers */ --border-color: #e5e7eb; --border-focus: #667eea; /* Accent (brand indigo) */ --accent-color: #667eea; --accent-hover: #5a6fd8; --accent-rgb: 102, 126, 234; /* State colours */ --danger: #ef4444; --success: #10b981; --warning: #f59e0b; --info: #3b82f6; /* Inputs */ --input-bg: #ffffff; --input-border: #d1d5db; --input-focus: #667eea; /* Shadows */ --shadow-sm: 0 1px 3px rgba(0,0,0,0.08); --shadow-md: 0 4px 12px rgba(0,0,0,0.10); --shadow-lg: 0 8px 32px rgba(0,0,0,0.12); /* Legacy aliases (compat with Scenes/SmartDevices) */ --primary-bg: var(--bg-primary); --secondary-bg: var(--bg-secondary); --card-bg: var(--bg-card); --hover-bg: var(--bg-tertiary); --text-color: var(--text-primary); --accent-blue: var(--accent-color); } /* ── 3. DARK MODE ─────────────────────────────────────────────────────── */ [data-theme="dark"] { /* Background */ --bg-primary: #111827; --bg-secondary: #1f2937; --bg-tertiary: #374151; --bg-card: #1f2937; --bg-sidebar: #0f172a; --bg-header: #111827; /* Text */ --text-primary: #f9fafb; --text-secondary: #9ca3af; --text-tertiary: #6b7280; --text-inverse: #111827; /* Borders */ --border-color: #374151; --border-focus: #667eea; /* Accent */ --accent-color: #667eea; --accent-hover: #7a8ff0; --accent-rgb: 102, 126, 234; /* State */ --danger: #f87171; --success: #34d399; --warning: #fbbf24; --info: #60a5fa; /* Inputs */ --input-bg: #1f2937; --input-border: #374151; --input-focus: #667eea; /* Shadows */ --shadow-sm: 0 1px 3px rgba(0,0,0,0.30); --shadow-md: 0 4px 12px rgba(0,0,0,0.40); --shadow-lg: 0 8px 32px rgba(0,0,0,0.50); /* Legacy aliases */ --primary-bg: var(--bg-primary); --secondary-bg: var(--bg-secondary); --card-bg: var(--bg-card); --hover-bg: var(--bg-tertiary); --text-color: var(--text-primary); --accent-blue: var(--accent-color); } /* ── 4. SMOOTH TRANSITIONS ────────────────────────────────────────────── */ body, .sidebar, .header, .card, .panel, input, select, textarea, button { transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease; } /* ── 5. SHARED SCROLLBAR ──────────────────────────────────────────────── */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: var(--bg-secondary); } ::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: var(--accent-color); } /* ── 6. THEME TOGGLE BUTTON ───────────────────────────────────────────── */ .mia-theme-toggle { width: 36px; height: 36px; border-radius: 50%; border: none; background: transparent; color: var(--text-secondary); cursor: pointer; font-size: 1.1rem; display: flex; align-items: center; justify-content: center; transition: background 0.2s, color 0.2s; } .mia-theme-toggle:hover { background: var(--bg-secondary); color: var(--text-primary); } /* ── 7. SHARED SIDEBAR ────────────────────────────────────────────────── */ .sidebar { background: var(--bg-sidebar); border-right: 1px solid var(--border-color); color: var(--text-primary); } .sidebar-item { color: var(--text-secondary); border-radius: 8px; padding: 10px 12px; cursor: pointer; transition: background 0.15s, color 0.15s; display: flex; align-items: center; gap: 10px; text-decoration: none; } .sidebar-item:hover, .sidebar-item.active { background: var(--bg-tertiary); color: var(--text-primary); } .sidebar-item.active { color: var(--accent-color); } /* ── 8. SHARED HEADER ─────────────────────────────────────────────────── */ .app-header { background: var(--bg-header); border-bottom: 1px solid var(--border-color); color: var(--text-primary); display: flex; align-items: center; justify-content: space-between; padding: 0 1.5rem; height: 60px; min-height: 60px; } /* ── 9. SHARED CARD ───────────────────────────────────────────────────── */ .mia-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 12px; padding: 1.25rem; box-shadow: var(--shadow-sm); } /* ── 10. INPUTS & FORMS ───────────────────────────────────────────────── */ .mia-input, .mia-select, .mia-textarea { background: var(--input-bg); color: var(--text-primary); border: 1px solid var(--input-border); border-radius: 8px; padding: 10px 14px; font-size: 14px; width: 100%; outline: none; transition: border-color 0.2s; } .mia-input:focus, .mia-select:focus, .mia-textarea:focus { border-color: var(--input-focus); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.15); } .mia-input::placeholder { color: var(--text-tertiary); } /* ── 11. BUTTONS ──────────────────────────────────────────────────────── */ .mia-btn { padding: 10px 20px; border: none; border-radius: 8px; cursor: pointer; font-size: 14px; font-weight: 500; transition: opacity 0.2s, transform 0.15s; display: inline-flex; align-items: center; gap: 6px; } .mia-btn:hover { opacity: 0.88; transform: translateY(-1px); } .mia-btn:active { transform: translateY(0); } .mia-btn-primary { background: var(--accent-color); color: #fff; } .mia-btn-secondary { background: var(--bg-tertiary); color: var(--text-primary); } .mia-btn-danger { background: var(--danger); color: #fff; } .mia-btn-success { background: var(--success); color: #fff; } /* ── 12. BADGE ────────────────────────────────────────────────────────── */ .mia-badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; background: rgba(var(--accent-rgb), 0.15); color: var(--accent-color); }