/* ============================================ EL CASTILLO DEL CONDE — Design Tokens ============================================ Escala cerrada de color y tipografía. - Cualquier nuevo color/tamaño que no encaje en estos tokens debe sumarse aquí, no inline. - Mínimo legible en móvil: --fs-xs (≈ 13px). Solo --fs-micro baja de eso, y se reserva para marcadores decorativos / metadatos no leídos (✦, esquinas, etc.). */ :root { /* ============================================================ 1 · BLOOD SCALE (oscuro → brillante → pálido) ============================================================ */ --blood-deep: #1a0000; --blood-shadow: #2a0000; --blood-dark: #3d0000; --blood-mid: #5a0000; --blood-core: #8b0000; --blood-bright: #cc0000; --blood-glow: #ff1a1a; --blood-flare: #ff2a2a; --blood-pale: #ffd7d7; /* ============================================================ 2 · STONE / SHADOW (base oscura) ============================================================ */ --void: #000000; --abyss: #050505; --crypt: #0a0a0a; --stone-dark: #111111; --stone: #1a1a1a; --stone-mid: #2a2a2a; --stone-light: #3a3a3a; --ash: #666666; --bone: #999999; /* ============================================================ 3 · PARCHMENT / GOLD (acentos cálidos, texto) ============================================================ */ --parchment-bright: #f0e0c0; --parchment: #e0c8a0; --parchment-dim: #c8b89a; --parchment-muted: #9a8870; --gold: #c9a84c; --gold-bright: #e8c96b; --gold-warm: #d4a84b; /* ============================================================ 4 · PURPLE UNDERTONES (atmósfera) ============================================================ */ --purple-abyss: #0d0012; --purple-shadow: #1a0a2e; --purple-mist: #2d1b4e; --purple-glow: rgba(88, 28, 135, 0.15); /* ============================================================ 5 · CCTV / DIAGNOSTIC / FUNCTIONAL ============================================================ */ --cctv-green: #33ff33; --cctv-green-dim: #219421; /* Estados funcionales (durabilidad, alertas) */ --status-success: #44aa44; --status-warning: #cc9900; --status-danger: #cc5533; --status-attack: #cc6644; /* Acentos puntuales */ --accent-purple: #c040ff; --accent-cyan: #00ddff; /* Sombra de fondo extra-oscura con tinte sangre */ --blood-abyss: #0d0000; /* ============================================================ 6 · OVERLAYS (rgba consolidados) ============================================================ */ --overlay-deep: rgba(0, 0, 0, 0.92); --overlay-dark: rgba(0, 0, 0, 0.85); --overlay-mid: rgba(0, 0, 0, 0.6); --overlay-soft: rgba(0, 0, 0, 0.4); --overlay-blood-strong: rgba(139, 0, 0, 0.55); --overlay-blood: rgba(139, 0, 0, 0.3); --overlay-blood-soft: rgba(139, 0, 0, 0.15); --fog-white: rgba(200, 200, 210, 0.03); --fog-dense: rgba(200, 200, 210, 0.08); /* ============================================================ 7 · BORDERS (rgba para bordes consistentes) ============================================================ */ --border-blood-strong: rgba(204, 0, 0, 0.6); --border-blood: rgba(139, 0, 0, 0.5); --border-blood-soft: rgba(139, 0, 0, 0.25); --border-gold: rgba(224, 200, 160, 0.4); --border-gold-soft: rgba(224, 200, 160, 0.2); /* Parchment / gold con alpha (fondos cálidos translúcidos) */ --overlay-parchment-strong: rgba(224, 200, 160, 0.6); --overlay-parchment: rgba(224, 200, 160, 0.45); --overlay-parchment-soft: rgba(224, 200, 160, 0.18); /* Blood-darker con alpha (sangre más oscura traslúcida) */ --overlay-blood-deep: rgba(100, 0, 0, 0.7); --overlay-blood-deep-soft: rgba(100, 0, 0, 0.3); /* ============================================================ 8 · SEMANTIC — TEXTO (intención, no matiz) ============================================================ */ --text-primary: var(--parchment); --text-secondary: var(--parchment-dim); --text-muted: var(--parchment-muted); --text-disabled: var(--ash); --text-inverse: #ffffff; --text-blood: var(--blood-bright); --text-blood-soft: var(--blood-pale); --text-gold: var(--gold-bright); /* ============================================================ 9 · TIPOGRAFÍA — escala cerrada (10 niveles) ============================================================ Mínimo móvil garantizado en cada token: micro → 11.5px (solo decorativo, NO texto leído) xs → 12.8px sm → 14px base → 15.2px A partir de --fs-base hacia arriba: tipografía legible siempre. */ --fs-micro: clamp(0.72rem, 1.6vw, 0.8rem); /* decorativo / metadatos no leídos */ --fs-xs: clamp(0.8rem, 1.9vw, 0.88rem); /* badges, labels, captions */ --fs-sm: clamp(0.88rem, 2.1vw, 0.95rem); /* texto secundario */ --fs-base: clamp(0.95rem, 2.4vw, 1.05rem); /* cuerpo */ --fs-md: clamp(1.05rem, 2.6vw, 1.2rem); /* lead, énfasis */ --fs-lg: clamp(1.2rem, 3vw, 1.5rem); /* subtítulos */ --fs-xl: clamp(1.4rem, 4.5vw, 2rem); /* h3 */ --fs-2xl: clamp(1.8rem, 6vw, 2.8rem); /* h2 */ --fs-3xl: clamp(2.2rem, 8vw, 3.8rem); /* h1 */ --fs-display: clamp(3rem, 11vw, 6rem); /* hero / display */ /* ============================================================ 10 · FAMILIAS TIPOGRÁFICAS ============================================================ */ --font-display: 'Cinzel', serif; --font-body: 'IM Fell English', serif; --font-accent: 'Creepster', cursive; /* ============================================================ 11 · ESPACIADO / LAYOUT ============================================================ */ --section-pad: clamp(80px, 12vh, 160px); --content-max: 1200px; --gutter: clamp(20px, 4vw, 60px); --navbar-height: clamp(70px, 10vh, 100px); /* ============================================================ 12 · TRANSICIONES ============================================================ */ --ease-dark: cubic-bezier(0.23, 1, 0.32, 1); --ease-horror: cubic-bezier(0.68, -0.55, 0.27, 1.55); --duration-slow: 1.2s; --duration-med: 0.6s; --duration-fast: 0.3s; /* ============================================================ 13 · Z-LAYERS ============================================================ */ --z-bg: 1; --z-content: 10; --z-fog: 50; --z-particles: 55; --z-nav: 100; --z-menu: 200; --z-cursor: 9999; /* ============================================================ 14 · CCTV ATMOSPHERE ============================================================ */ --cctv-grain-opacity: 0.1; --cctv-grain-duration: 0.2s; --cctv-static-opacity: 0.4; --cctv-static-duration: 0.1s; /* ============================================================ 15 · COMPATIBILIDAD (alias antiguos en uso) ============================================================ */ --overlay-blood: rgba(139, 0, 0, 0.12); }