@font-face { font-family: 'Space Grotesk'; src: url('../assets/fonts/SpaceGrotesk-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Space Grotesk'; src: url('../assets/fonts/SpaceGrotesk-Medium.ttf') format('truetype'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'Space Grotesk'; src: url('../assets/fonts/SpaceGrotesk-Bold.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'Inter'; src: url('../assets/fonts/Inter-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Inter'; src: url('../assets/fonts/Inter-Medium.ttf') format('truetype'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'Inter'; src: url('../assets/fonts/Inter-SemiBold.ttf') format('truetype'); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: 'Inter'; src: url('../assets/fonts/Inter-Bold.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; } :root { /* Colores base — Paleta Oro (default) */ --bg-primary: #0a0a0a; --bg-secondary: #111111; --bg-tertiary: #1a1a1a; --bg-elevated: #222222; /* Texto */ --text-primary: #f5f5f0; --text-secondary: #a0a099; --text-muted: #6b6b63; /* Acento — cambiar solo esta variable para cambiar todo el color de marca */ --accent: #c9a227; --accent-hover: #dbb53a; --accent-dim: rgba(201, 162, 39, 0.15); --accent-soft: rgba(201, 162, 39, 0.4); --accent-mid: rgba(201, 162, 39, 0.3); /* Utilidades */ --border: rgba(245, 245, 240, 0.08); --danger: #e05a5a; --success: #7fb069; --warning: #d4a03d; --danger-soft: rgba(224, 90, 90, 0.08); --hover-bg: rgba(245, 245, 240, 0.03); /* Tipografía (self-hosted, offline-friendly) */ --font-display: "Space Grotesk", Georgia, "Times New Roman", Times, serif; --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace; /* Espaciado */ --space-xs: 0.25rem; --space-sm: 0.5rem; --space-md: 1rem; --space-lg: 1.5rem; --space-xl: 2.5rem; --space-2xl: 4rem; /* Layout */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --max-width: 1200px; /* Transiciones */ --transition-fast: 120ms ease; --transition-base: 200ms ease; } /* Selector de fuentes — overrides aplicadas desde */ [data-font="inter"] { --font-display: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } [data-font="system"] { --font-display: Georgia, "Times New Roman", Times, serif; --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } /* Paleta Noche — fría, azul profundo. Enfocada para sesiones largas. */ [data-theme="noche"] { --bg-primary: #0b111e; --bg-secondary: #111a2c; --bg-tertiary: #182438; --bg-elevated: #22314a; --text-primary: #eaf2fb; --text-secondary: #9fb0c4; --text-muted: #5f7085; --accent: #58a6e5; --accent-hover: #6fb6f2; --accent-dim: rgba(88, 166, 229, 0.16); --accent-soft: rgba(88, 166, 229, 0.4); --accent-mid: rgba(88, 166, 229, 0.3); --border: rgba(234, 242, 251, 0.1); --danger: #e06565; --success: #62c08a; --warning: #d9a04a; --danger-soft: rgba(224, 101, 101, 0.08); --hover-bg: rgba(234, 242, 251, 0.04); } /* Paleta Esmeralda — verde bosque apagado. Calma y flujo creativo. */ [data-theme="esmeralda"] { --bg-primary: #0b0f0d; --bg-secondary: #111713; --bg-tertiary: #18211c; --bg-elevated: #22302a; --text-primary: #eef5f0; --text-secondary: #a3b3a9; --text-muted: #627069; --accent: #3fb782; --accent-hover: #55cb96; --accent-dim: rgba(63, 183, 130, 0.16); --accent-soft: rgba(63, 183, 130, 0.4); --accent-mid: rgba(63, 183, 130, 0.3); --border: rgba(238, 245, 240, 0.1); --danger: #e0685e; --success: #5cb876; --warning: #d4a24a; --danger-soft: rgba(224, 104, 94, 0.08); --hover-bg: rgba(238, 245, 240, 0.04); } /* Paleta Índigo — violeta profundo. Creatividad y abstracción. */ [data-theme="indigo"] { --bg-primary: #0e0b18; --bg-secondary: #151026; --bg-tertiary: #1f1935; --bg-elevated: #2b2347; --text-primary: #f0edf9; --text-secondary: #a9a2c4; --text-muted: #6a6287; --accent: #9d86e0; --accent-hover: #b09cf0; --accent-dim: rgba(157, 134, 224, 0.16); --accent-soft: rgba(157, 134, 224, 0.4); --accent-mid: rgba(157, 134, 224, 0.3); --border: rgba(240, 237, 249, 0.1); --danger: #e0656f; --success: #63c096; --warning: #d4a44a; --danger-soft: rgba(224, 101, 111, 0.08); --hover-bg: rgba(240, 237, 249, 0.04); } /* Paleta Papel — clara, marfil. Mejor lectura y revisión de documentos. */ [data-theme="papel"] { --bg-primary: #f6f3ec; --bg-secondary: #efeadf; --bg-tertiary: #e6e0d3; --bg-elevated: #ffffff; --text-primary: #232019; --text-secondary: #5a554b; --text-muted: #8b8578; --accent: #a87f16; --accent-hover: #8f6c10; --accent-dim: rgba(168, 127, 22, 0.15); --accent-soft: rgba(168, 127, 22, 0.35); --accent-mid: rgba(168, 127, 22, 0.28); --border: rgba(35, 32, 25, 0.14); --danger: #c0392b; --success: #3f7d4f; --warning: #a07a1e; --danger-soft: rgba(192, 57, 43, 0.1); --hover-bg: rgba(35, 32, 25, 0.04); }