/* ============================ VARIÁVEIS DO TEMA CLARO (PADRÃO) ============================ */ :root { /* Fonte */ --font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; /* Cores principais */ --color-bg: #f3f4f6; /* fundo da página */ --color-bg-elevated: #ffffff; /* cartões / containers */ --color-border: #d1d5db; --color-text: #111827; --color-text-muted: #6b7280; --color-primary: #2563eb; /* azul principal */ --color-primary-soft: rgba(37, 99, 235, 0.08); --color-accent: #f59e0b; /* amarelo/destaque */ --color-danger: #cf3c3c; --color-success: #059669; /* Estados / inputs */ --color-input-bg: #ffffff; --color-input-border: #d1d5db; --color-input-focus: #2563eb; --color-table-header-bg: #e5e7eb; --color-table-row-hover: #f9fafb; /* Tipografia */ --font-size-xs: 12px; --font-size-sm: 13px; --font-size-base: 14px; --font-size-lg: 16px; --font-size-xl: 20px; --font-size-2xl: 24px; /* Espaçamentos e radius */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --shadow-soft: 0 8px 18px rgba(15, 23, 42, 0.12); } /* ============================ MODO ESCURO AUTOMÁTICO (SEGUINDO SISTEMA) ============================ */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --color-bg: #060818; --color-bg-elevated: #0b1020; --color-border: #1f2937; --color-text: #e5e7eb; --color-text-muted: #9ca3af; --color-primary: #1d4ed8; --color-primary-soft: rgba(37, 99, 235, 0.12); --color-accent: #facc15; --color-danger: #cf3c3c; --color-success: #10b981; --color-input-bg: #020617; --color-input-border: #1f2937; --color-input-focus: #2563eb; --color-table-header-bg: #020617; --color-table-row-hover: rgba(148, 163, 184, 0.08); --shadow-soft: 0 10px 25px rgba(15, 23, 42, 0.6); } } /* ============================ MODO ESCURO FORÇADO (manual) ============================ */ /* Para usar: */ :root[data-theme="dark"] { color-scheme: dark; --color-bg: #060818; --color-bg-elevated: #0b1020; --color-border: #1f2937; --color-text: #e5e7eb; --color-text-muted: #9ca3af; --color-primary: #1d4ed8; --color-primary-soft: rgba(37, 99, 235, 0.12); --color-accent: #facc15; --color-danger: #ef4444; --color-success: #10b981; --color-input-bg: #020617; --color-input-border: #1f2937; --color-input-focus: #2563eb; --color-table-header-bg: #020617; --color-table-row-hover: rgba(148, 163, 184, 0.08); --shadow-soft: 0 10px 25px rgba(15, 23, 42, 0.6); } /* ============================ ESTILOS GLOBAIS ============================ */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { background: var(--color-bg); color: var(--color-text); font-family: var(--font-sans); font-size: var(--font-size-base); -webkit-font-smoothing: antialiased; } /* Seleção */ ::selection { background: var(--color-primary-soft); color: #111827; }