/* ===================================================================== MAESTRULI — tokens.css Fuente única de verdad del sistema visual. Tema: Dark Composer. CÓMO SE USA - Se carga PRIMERO en base.html, antes de style.css y de cualquier otra hoja: - Ningún otro archivo CSS declara colores en hex/rgba. Todo via var(). - Todas las variables viven dentro de :root para que el cascade las resuelva en cualquier elemento del documento. ===================================================================== */ :root { /* ------------------------------------------------------------------- 1. PALETA BASE — fondos (Dark Composer) ------------------------------------------------------------------- */ --bg-composer: #1a1816; /* fondo de página */ --bg-composer-2: #232120; /* paneles */ --bg-composer-3: #2a2724; /* cards / elevado */ --bg-composer-4: #322e29; /* hover / activo */ --surface-page: #1a1816; /* = --bg-composer */ --surface-card: #232120; /* = --bg-composer-2 */ --surface-elevated: #2a2724; /* = --bg-composer-3 */ --surface-sunken: #322e29; /* = --bg-composer-4 */ --bg: var(--surface-page); --bg-surface: var(--surface-card); --bg-surface-hover: var(--surface-elevated); /* ------------------------------------------------------------------- 2. TINTA / TEXTO ------------------------------------------------------------------- */ --ink-composer: #d4ccb8; /* texto principal */ --ink-composer-bright: #f0e8d0; /* títulos / énfasis */ --ink-composer-soft: #a89e88; /* secundario */ --ink-composer-faint: #7a716a; /* terciario / labels */ --ink-composer-mute: #5a534d; /* deshabilitado / decorativo */ --text-primary: #d4ccb8; /* = --ink-composer */ --text-secondary: #a89e88; /* = --ink-composer-soft */ --text-muted: #7a716a; /* = --ink-composer-faint */ --text-faint: #5a534d; /* = --ink-composer-mute */ --text: var(--text-primary); --text-on-accent: #1a1816; /* invertido para dark */ /* ------------------------------------------------------------------- 3. BORDES / REGLAS ------------------------------------------------------------------- */ --rule-composer: #3a3530; /* bordes / divisores */ --rule-composer-light: #4a4540; /* bordes enfatizados */ --border-default: #3a3530; /* = --rule-composer */ --border: var(--border-default); --border-subtle: #3a3530; /* = --rule-composer */ --border-strong: #4a4540; /* = --rule-composer-light */ /* ------------------------------------------------------------------- 4. ACENTOS ------------------------------------------------------------------- */ /* Rojo western — la púa del cartel: sangre sobre negro polvoriento */ --burgundy-on-dark: #d94f43; /* acento principal */ --burgundy-on-dark-hot: #ef6a55; /* acento intenso / activo */ --burgundy-on-dark-soft: rgba(217, 79, 67, 0.14); --burgundy-on-dark-deep: rgba(217, 79, 67, 0.05); --accent-primary: #d94f43; /* = --burgundy-on-dark */ --accent-primary-strong: #ef6a55; /* = --burgundy-on-dark-hot */ --accent-primary-soft: rgba(217, 79, 67, 0.14); --accent-primary-glow: rgba(224, 74, 58, 0.32); --accent: var(--accent-primary); --accent-dim: var(--accent-primary-soft); --accent-warm: #b5651d; /* contraste 4.6:1 sobre --surface-page */ --accent-warm-soft: rgba(181, 101, 29, 0.12); /* Hueso y sepia del cartel (tipografía y ornamentos western) */ --west-bone: #e9dfc7; --west-sepia: #c9a86a; --west-sepia-dim: rgba(201, 168, 106, 0.4); --key-active: #d94f43; /* = --burgundy-on-dark */ --key-active-glow: var(--accent-primary-glow); --shadow-active-halo: 0 0 20px rgba(224, 74, 58, 0.3); /* halo rojo western */ /* ------------------------------------------------------------------- 5. FUNCIONES ARMÓNICAS ------------------------------------------------------------------- */ --fn-tonic: #9bb068; /* = --fn-tonic-dark */ --fn-tonic-dark: #9bb068; --fn-tonic-dark-bg: rgba(155, 176, 104, 0.12); --fn-subdominant: #7099c8; /* = --fn-subdominant-dark */ --fn-subdominant-dark: #7099c8; --fn-subdominant-dark-bg: rgba(112, 153, 200, 0.12); --fn-dominant: #d49060; /* = --fn-dominant-dark */ --fn-dominant-dark: #d49060; --fn-dominant-dark-bg: rgba(212, 144, 96, 0.12); /* ------------------------------------------------------------------- 6. PIANO (roles de tecla) ------------------------------------------------------------------- */ --piano-root: var(--accent-primary); --piano-scale: #8a7030; --piano-target: #a35536; --piano-safe: #5a7a6a; --piano-avoid: #6e2828; --piano-blue: #4a6280; --key-white: #e8e0d0; /* = --mini-white */ --key-black: #1f1d1a; /* = --mini-black */ /* ------------------------------------------------------------------- 7. MINI-DIAGRAMAS (acordes / piano chico) ------------------------------------------------------------------- */ --mini-piano-bg: #0a0908; --mini-white: #e8e0d0; --mini-white-shadow:#c0b8a8; --mini-black: #1f1d1a; --mini-chord-note: #d68585; --mini-chord-note-shadow: #b85f5f; --mini-chord-black: #c97070; --mini-chord-bass: #e89e9e; --mini-chord-bass-shadow: #b85f5f; /* ------------------------------------------------------------------- 8. TIPOGRAFÍA — familias ------------------------------------------------------------------- */ --font-sans: 'Inter', system-ui, -apple-system, sans-serif; --font-display: 'Fraunces', Georgia, serif; --font-mono: 'JetBrains Mono', 'Fira Code', monospace; --font-body: var(--font-sans); /* ------------------------------------------------------------------- 8b. TIPOGRAFÍA — tamaños ------------------------------------------------------------------- */ --text-2xs: 11px; /* micro labels — redondeo de 9/10px aprobado */ --text-xs: 12px; --text-sm: 14px; --text-base: 16px; --text-md: 18px; --text-lg: 22px; --text-xl: 28px; /* umbral display: ≥ esta talla usa --font-display */ --text-2xl: 36px; --text-3xl: 48px; --text-display: 64px; /* ------------------------------------------------------------------- 8c. TIPOGRAFÍA — interlineado y tracking ------------------------------------------------------------------- */ --leading-tight: 1.2; --leading-base: 1.6; --leading-loose: 1.8; --track-tight: -0.025em; --track-normal: 0; --track-wide: 0.18em; --track-mono: 0.08em; /* ------------------------------------------------------------------- 9. ESPACIADO (escala de 4px) ------------------------------------------------------------------- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; /* ------------------------------------------------------------------- 10. RADIOS ------------------------------------------------------------------- */ --radius-xs: 3px; --radius-sm: 4px; /* mantenido — no renombrar (call sites existentes) */ --radius-chip: 6px; /* pills, ghost-btn, pp-item, chord-sub-select */ --radius-md: 8px; --radius-lg: 12px; --radius-pill: 999px; /* ------------------------------------------------------------------- 11. SOMBRAS ------------------------------------------------------------------- */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.20); --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.30); --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.40); /* ------------------------------------------------------------------- 12. MOVIMIENTO (duraciones, curvas, atajo) ------------------------------------------------------------------- */ --duration-instant: 80ms; --duration-fast: 150ms; --duration-base: 200ms; --duration-slow: 400ms; --ease-out: cubic-bezier(0.2, 0, 0, 1); --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --ease-bounce: cubic-bezier(0.175, 0.885, 0.32, 1.275); --transition: var(--duration-base) var(--ease-out); /* ------------------------------------------------------------------- 13. LAYOUT (anchos máximos) ------------------------------------------------------------------- */ --container-max: 1200px; /* max ancho general del sitio */ --container-narrow: 800px; /* columnas de contenido estándar */ --container-text: 760px; /* bloques de prosa larga */ --content-max: 65ch; /* ancho máximo para legibilidad de texto */ }