/* ============================================ PropCRM — Design Tokens & CSS Variables ============================================ */ :root { /* Brand — verde lima */ --brand: #c7f73f; /* lima vibrante (acento, fills) */ --brand-dark: #b2e02f; /* lima más profundo (hover) */ --brand-light: #f2fcd6; /* lima muy claro (fondos suaves) */ --on-brand: #15230a; /* texto/íconos sobre el lima (oscuro, legible) */ --brand-ink: #4d7c0f; /* verde oliva: texto/íconos lima sobre fondo claro */ /* Colors */ --blue: #185FA5; --blue-light: #E6F1FB; --teal: #0F6E56; --teal-light: #E1F5EE; --green: #3B6D11; --green-light: #EAF3DE; --amber: #854F0B; --amber-light: #FAEEDA; --red: #A32D2D; --red-light: #FCEBEB; --coral: #993C1D; --coral-light: #FAECE7; /* Neutrals */ --bg: #f5f6fa; --surface: #ffffff; --surface2: #f0f2f8; --border: rgba(0,0,0,0.08); --border-strong: rgba(0,0,0,0.14); /* Text */ --text-primary: #111827; --text-secondary: #6b7280; --text-hint: #9ca3af; /* Sidebar */ --sidebar-bg: #0f172a; --sidebar-text: #94a3b8; --sidebar-active-bg: rgba(255,255,255,0.08); --sidebar-active-text: #ffffff; --sidebar-hover-bg: rgba(255,255,255,0.05); --sidebar-width: 272px; /* Layout */ --topbar-height: 70px; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 22px; /* Shadows */ --shadow-sm: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04); --shadow-md: 0 4px 12px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.04); --shadow-lg: 0 10px 30px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.06); /* Glass (vidrio esmerilado) — claro */ --glass-bg: rgba(255,255,255,0.62); --glass-border: rgba(0,0,0,0.06); --glass-sidebar: rgba(15,23,42,0.82); --glass-modal: rgba(255,255,255,0.76); /* Typography — fluid scale */ --font-sans: 'DM Sans', system-ui, sans-serif; --font-display: 'DM Serif Display', Georgia, serif; /* Base font: 16px desktop, scales down on mobile */ --fs-xs: 0.75rem; /* 12px */ --fs-sm: 0.875rem; /* 14px */ --fs-base: 1rem; /* 16px */ --fs-md: 1.0625rem; /* 17px */ --fs-lg: 1.125rem; /* 18px */ --fs-xl: 1.25rem; /* 20px */ --fs-2xl: 1.5rem; /* 24px */ --fs-3xl: 1.75rem; /* 28px */ /* Transitions */ --ease: cubic-bezier(0.4, 0, 0.2, 1); --transition: 0.18s var(--ease); } /* ============================================ Tema oscuro — se activa con data-theme="dark" en Solo redefine neutros, texto y sombras. La marca lima y el sidebar (ya oscuro) se mantienen. ============================================ */ [data-theme="dark"] { --bg: #0d1117; --surface: #161b22; --surface2: #1f2630; --border: rgba(255,255,255,0.10); --border-strong: rgba(255,255,255,0.16); --text-primary: #f0f3f7; --text-secondary: #9aa4b2; --text-hint: #6b7480; --brand-light: #1e2a10; --brand-ink: #c7f73f; --shadow-sm: 0 1px 3px rgba(0,0,0,0.40); --shadow-md: 0 4px 12px rgba(0,0,0,0.45); --shadow-lg: 0 10px 30px rgba(0,0,0,0.55); /* Glass — oscuro */ --glass-bg: rgba(22,27,34,0.42); --glass-border: rgba(255,255,255,0.11); --glass-sidebar: rgba(16,20,28,0.40); --glass-modal: rgba(28,33,42,0.50); } /* ── Fluid base ── */ html { font-size: 18px; /* desktop base — grande y legible en 27" */ } @media (max-width: 1440px) { html { font-size: 17px; } } @media (max-width: 1280px) { html { font-size: 16px; } } @media (max-width: 1024px) { html { font-size: 15px; } } @media (max-width: 768px) { html { font-size: 15px; } :root { --sidebar-width: 260px; --topbar-height: 60px; } } @media (max-width: 480px) { html { font-size: 14px; } } /* ── Fondo con manchas de color difusas (solo modo oscuro) ── Fijo: no se mueve al hacer scroll, el contenido se desplaza encima. */ [data-theme="dark"] body { background-color: #0a0d12; background-image: radial-gradient(42% 38% at 12% 10%, rgba(150,220,60,0.30) 0%, rgba(10,13,18,0) 62%), radial-gradient(46% 40% at 85% 14%, rgba(40,110,200,0.32) 0%, rgba(10,13,18,0) 62%), radial-gradient(50% 46% at 72% 88%, rgba(120,70,210,0.26) 0%, rgba(10,13,18,0) 64%), radial-gradient(40% 38% at 30% 95%, rgba(30,150,120,0.24) 0%, rgba(10,13,18,0) 60%); background-attachment: fixed; }