/* ================================ AluciSol Design System — Dark + Gold Tokens, fonts y componentes base. Mantén este archivo intacto al portar a otros proyectos. ================================ */ @font-face { font-family: 'Space Grotesk'; font-weight: 400 700; font-display: swap; src: url('../fonts/spacegrotesk/SpaceGrotesk-Latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122; } @font-face { font-family: 'Space Grotesk'; font-weight: 400 700; font-display: swap; src: url('../fonts/spacegrotesk/SpaceGrotesk-LatinExt.woff2') format('woff2'); unicode-range: U+0100-024F, U+1E00-1EFF, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Inter'; font-weight: 400; font-display: swap; src: url('../fonts/inter/Inter-Regular.woff2') format('woff2'); } @font-face { font-family: 'Inter'; font-weight: 500; font-display: swap; src: url('../fonts/inter/Inter-Medium.woff2') format('woff2'); } @font-face { font-family: 'Inter'; font-weight: 600; font-display: swap; src: url('../fonts/inter/Inter-SemiBold.woff2') format('woff2'); } @font-face { font-family: 'Inter'; font-weight: 700; font-display: swap; src: url('../fonts/inter/Inter-Bold.woff2') format('woff2'); } :root { color-scheme: dark; /* Deep navy with subtle warmth */ --bg-primary: #060d16; --bg-secondary: #0a1628; --bg-card: #0d1f35; --bg-card-hover: #122a45; --bg-input: #080f1c; --bg-surface: rgba(13, 31, 53, 0.6); /* Accents */ --accent-gold: #F5C542; --accent-gold-hover: #E0B035; --accent-gold-light: rgba(245, 197, 66, 0.12); --accent-teal: #4ECDC4; --accent-teal-hover: #3CB8B0; --accent-teal-light: rgba(78, 205, 196, 0.12); /* Text */ --text-primary: #F0F4F8; --text-secondary: #94A3B8; --text-muted: #64748B; --text-inverse: #0D1F35; /* Borders / glass */ --border-color: rgba(255, 255, 255, 0.06); --border-subtle: rgba(255, 255, 255, 0.04); --glass-bg: rgba(13, 31, 53, 0.7); --glass-border: rgba(255, 255, 255, 0.08); /* Status */ --danger: #EF4444; --danger-light: rgba(239, 68, 68, 0.12); --success: #22C55E; --success-light: rgba(34, 197, 94, 0.12); --warning: #F59E0B; --warning-light: rgba(245, 158, 11, 0.12); /* Radii */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 20px; /* Shadows — always layered, never flat */ --shadow-sm: 0 1px 2px rgba(0,0,0,.3), 0 1px 3px rgba(0,0,0,.15); --shadow-md: 0 4px 6px -1px rgba(0,0,0,.3), 0 2px 4px -2px rgba(0,0,0,.2); --shadow-lg: 0 10px 15px -3px rgba(0,0,0,.4), 0 4px 6px -4px rgba(0,0,0,.2); --shadow-glow-gold: 0 0 20px rgba(245, 197, 66, 0.15); /* Typography */ --font-family: 'Space Grotesk', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --font-mono: 'SF Mono', 'Fira Code', 'Fira Mono', 'Roboto Mono', monospace; /* Motion */ --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1); --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1); --transition-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1); --transition-spring: 500ms cubic-bezier(0.34, 1.56, 0.64, 1); /* Layout */ --max-width: 1440px; --header-height: 60px; /* Surface tokens — invierten en light theme */ --bg-subtle: rgba(255, 255, 255, 0.03); --bg-overlay: rgba(255, 255, 255, 0.04); --bg-hover: rgba(255, 255, 255, 0.08); --bg-strong: rgba(255, 255, 255, 0.06); } /* ================================ LIGHT THEME OVERRIDES Activado con ================================ */ [data-theme="light"] { color-scheme: light; --bg-primary: #F8FAFC; --bg-secondary: #FFFFFF; --bg-card: #FFFFFF; --bg-card-hover: #F1F5F9; --bg-input: #FFFFFF; --bg-surface: rgba(255, 255, 255, 0.7); --accent-gold: #D4A017; --accent-gold-hover: #B8860B; --accent-gold-light: rgba(212, 160, 23, 0.14); --text-primary: #0B3954; --text-secondary: #475569; --text-muted: #64748B; --text-inverse: #FFFFFF; --border-color: rgba(11, 57, 84, 0.10); --border-subtle: rgba(11, 57, 84, 0.06); --glass-bg: rgba(255, 255, 255, 0.85); --glass-border: rgba(11, 57, 84, 0.08); --shadow-sm: 0 1px 2px rgba(11,57,84,.05), 0 1px 3px rgba(11,57,84,.04); --shadow-md: 0 4px 6px -1px rgba(11,57,84,.08), 0 2px 4px -2px rgba(11,57,84,.05); --shadow-lg: 0 10px 15px -3px rgba(11,57,84,.10), 0 4px 6px -4px rgba(11,57,84,.05); --shadow-glow-gold: 0 0 18px rgba(212, 160, 23, 0.18); --bg-subtle: rgba(11, 57, 84, 0.03); --bg-overlay: rgba(11, 57, 84, 0.04); --bg-hover: rgba(11, 57, 84, 0.07); --bg-strong: rgba(11, 57, 84, 0.06); } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html, body { min-height: 100%; background: var(--bg-primary); color: var(--text-primary); font-family: var(--font-family); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ---- Base components ---- */ .card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); overflow: hidden; } .card-header { padding: 16px 20px; border-bottom: 1px solid var(--border-color); } .card-body { padding: 20px; } .btn { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-family); font-size: 0.82rem; font-weight: 600; padding: 8px 16px; border-radius: var(--radius-md); border: 1px solid transparent; cursor: pointer; transition: background-color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast); } .btn-primary { background: var(--accent-gold); color: var(--text-inverse); } .btn-primary:hover { background: var(--accent-gold-hover); } .btn-secondary { background: rgba(255, 255, 255, 0.06); color: var(--text-primary); border-color: var(--border-color); } .btn-secondary:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.15); } input[type="text"], input[type="email"], input[type="password"], input[type="search"], input[type="number"], select, textarea { font-family: var(--font-family); font-size: 0.85rem; color: var(--text-primary); background: var(--bg-input); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 10px 14px; outline: none; transition: border-color var(--transition-fast), box-shadow var(--transition-fast); } input:focus, select:focus, textarea:focus { border-color: var(--accent-gold); box-shadow: 0 0 0 3px var(--accent-gold-light); } /* Accessibility defaults */ :focus-visible { outline: 2px solid var(--accent-gold); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }