:root { /* Cores Principais - Ajuste conforme a identidade visual do Kinkgram */ --primary-color: #E91E63; --primary-dark: #C2185B; --primary-light: #F48FB1; --primary-rgb: 233, 30, 99; --secondary-color: #9C27B0; --secondary-dark: #7B1FA2; --secondary-light: #CE93D8; --accent-color: #FF4081; /* Cores dos Planos */ --legado-color: #808080; --legado-light: #B0B0B0; --legado-dark: #505050; --bronze-color: #CD7F32; --bronze-light: #E6A85C; --bronze-dark: #8B5A2B; --prata-color: #C0C0C0; --prata-light: #E8E8E8; --prata-dark: #808080; --ouro-color: #FFD700; --ouro-light: #FFE55C; --ouro-dark: #B8860B; --diamante-color: #B9F2FF; --diamante-light: #E0F7FF; --diamante-dark: #4DD0E1; /* Cores de Fundo */ --bg-primary: #FFFFFF; --bg-secondary: #F5F5F5; --bg-dark: #212121; --bg-card: #FFFFFF; /* Cores de Texto */ --text-primary: #212121; --text-secondary: #757575; --text-light: #FFFFFF; --text-muted: #9E9E9E; /* Cores de Status */ --success-color: #4CAF50; --warning-color: #FF9800; --error-color: #F44336; --info-color: #2196F3; /* Bordas e Sombras */ --border-color: #E0E0E0; --border-radius: 8px; --border-radius-lg: 16px; --box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); --box-shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.15); /* Espaçamentos */ --spacing-xs: 4px; --spacing-sm: 8px; --spacing-md: 14px; --spacing-lg: 20px; --spacing-xl: 28px; --spacing-xxl: 30px; /* Tipografia */ --font-family: Quicksand, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --font-size-sm: 0.875rem; --font-size-base: 0.9rem; --font-size-lg: 1.125rem; --font-size-xl: 1.25rem; --font-size-2xl: 1.3rem; --font-size-3xl: 2rem; --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; /* Transições */ --transition-fast: 0.15s ease; --transition-base: 0.3s ease; --transition-slow: 0.5s ease; /* Container */ --container-max-width: 1200px; --container-padding: 20px; } html[data-site-theme='dark'] { --bg-primary: #121212; --bg-secondary: #1e1e1e; --bg-dark: #000000; --bg-card: #1e1e1e; --text-primary: #ffffff; --text-secondary: #b0b0b0; --text-muted: #757575; --border-color: #333333; } html[data-site-theme='light'] { --bg-primary: #FFFFFF; --bg-secondary: #f0f2f6; --bg-dark: #212121; --bg-card: #FFFFFF; /* Contraste mais seguro em fundos claros / cinzas (WCAG ~AA corpo) */ --text-primary: #141823; --text-secondary: #3d4451; --text-muted: #5c6370; --border-color: #d8dce3; } /* Modo escuro automático só quando painel/site não fixam tema no */ @media (prefers-color-scheme: dark) { html:not([data-admin-theme]):not([data-site-theme]) { --bg-primary: #121212; --bg-secondary: #1e1e1e; --bg-dark: #000000; --bg-card: #1e1e1e; --text-primary: #ffffff; --text-secondary: #b0b0b0; --text-muted: #757575; --border-color: #333333; } } /* Foco visível para navegação por teclado (evita anel em cliques de rato) */ :focus-visible { outline: 2px solid var(--primary-color); outline-offset: 2px; }