/* ========================================================= GLOBAL DESIGN TOKENS — Layout, Spacing & Structure + Theme Tokens (Light / Dark) ========================================================= */ /* ========================================================= 1) TOKENS GLOBALES (independientes del tema) ========================================================= */ :root { /* ----------------------------------- HEADER / TOPBAR ----------------------------------- */ --header-h: 64px; /* altura del topbar (desktop & mobile) */ --topbar-padding-x: 16px; /* espacio horizontal general */ /* ----------------------------------- CONTENIDO / ANCHOS MÁXIMOS ----------------------------------- */ --content-max: 1120px; /* ancho máximo del contenido central */ --content-gap: 24px; /* separación entre tarjetas/secciones */ /* ----------------------------------- RADIOS ----------------------------------- */ --radius-sm: 8px; --radius: 14px; /* usado por paneles, tarjetas principales */ --radius-lg: 20px; /* ----------------------------------- ESPACIADOS GLOBALES ----------------------------------- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 28px; /* ----------------------------------- TIPOGRAFÍA / TAMAÑOS BASE ----------------------------------- */ --font-size-sm: 13px; --font-size-base: 14px; --font-size-lg: 16px; --font-size-xl: 20px; --font-size-hero: 28px; /* ----------------------------------- ESTRUCTURA DE COLUMNAS (por si un día usas sidebar) ----------------------------------- */ --sidebar-w: 320px; /* ----------------------------------- SOMBRAS BASE (neutras, sin color) ----------------------------------- */ /* .home-section */ --shadow-sm: 0 1px 3px rgba(0,0,0,0.12); /* .notice-card */ --shadow-md: 0 4px 8px rgba(0,0,0,0.12); /* elevar hover */ --shadow-lg: 0 10px 18px rgba(0,0,0,0.16); } /* ========================================================= 2) THEME TOKENS – LIGHT (tema por defecto) ========================================================= */ :root { /* FONDOS */ --bg: #f5f7fb; /* fondo global */ --panel: #ffffff; /* tarjetas / paneles normales */ --panel-2: #dedede; /* paneles elevados o barras laterales */ /* TEXTO */ --text: #2d3748; /* gris oscuro profesional */ --text-strong: #1a202c; /* casi negro para títulos */ --muted: #6b7280; /* gris suave */ --muted-2: #9ca3af; /* notas, fechas */ /* COLOR DE MARCA (mismo sistema para ambos temas) */ --brand: #00b4d8; /* acento principal */ --brand-2: #009ec0; /* hover */ /* BORDES Y LÍNEAS */ --border: rgba(0,0,0,0.10); --border-strong: rgba(0,0,0,0.18); /* ACCIONES */ --success: #2ecc71; --warning: #ffbb33; --danger: #ff4d4d; /* HOVERS */ --hover: rgba(0,0,0,0.04); --active: rgba(0,0,0,0.08); /* POPUPS / ELEMENTOS ELEVADOS */ --panel-elev-border: transparent; --panel-elev-shadow: 0 18px 45px rgba(0,0,0,0.16); /* TARJETAS DE CONTENIDO (SURFACE) */ --panel-surf-border: rgba(0,0,0,0.06); /* borde sutil */ --panel-surf-shadow: 0 1px 4px rgba(0,0,0,0.07);/* sombra mini tipo FB */ /* Franja gris (tercer color, por ejemplo footer-bottom) */ --g-stripe: rgba(0, 0, 0, 0.035); /* BADGES DE AVISOS */ --badge-law-bg: #fef3c7; /* Ley / Norma */ --badge-health-bg:#d1fae5; /* Salud / Higiene */ --badge-tip-bg: #e0f2fe; /* Recomendación */ --badge-pill-text:#111827; /* texto oscuro sobre badge claro */ } /* ========================================================= 3) THEME TOKENS – DARK (cuando o tenga .dark) ========================================================= */ .dark { /* FONDOS */ --bg: #0d1117; /* fondo global */ --panel: #161b22; /* tarjetas / navegación */ --panel-2: #1c2230; /* paneles elevados o barras laterales */ /* TEXTO */ --text: #e6edf3; /* texto principal: alto contraste */ --text-strong: #f0f6fc; /* títulos */ --muted: #9fb0d0; /* texto secundario */ --muted-2: #7f8ca8; /* descripciones, timestamps */ /* COLOR DE MARCA */ --brand: #00d1ff; --brand-2: #7efaff; /* BORDES Y LÍNEAS */ --border: rgba(255,255,255,0.12); --border-strong: rgba(255,255,255,0.2); /* ACCIONES */ --success: #2ecc71; --warning: #f1c40f; --danger: #ff6b6b; /* HOVERS */ --hover: rgba(255,255,255,0.05); --active: rgba(255,255,255,0.08); /* POPUPS / ELEMENTOS ELEVADOS */ --panel-elev-border: rgba(255,255,255,0.08); --panel-elev-shadow: 0 8px 22px rgba(0,0,0,0.35); /* TARJETAS DE CONTENIDO (SURFACE) */ --panel-surf-border: rgba(255,255,255,0.05); /* borde súper sutil */ --panel-surf-shadow: none; /* sin sombra en dark */ /* Franja gris (tercer color) — puedes usar otro si quieres */ --g-stripe: rgba(0, 0, 0, 0.035); /* BADGES DE AVISOS */ --badge-law-bg: #fef3c7; /* Ley / Norma */ --badge-health-bg:#d1fae5; /* Salud / Higiene */ --badge-tip-bg: #e0f2fe; /* Recomendación */ --badge-pill-text:#111827; /* texto oscuro sobre badge claro */ }