/* ============================================================================ SKYLINE — Design tokens · Diente de León Heritage Versión: 2.0 · 2026-06-13 Concepto: Brewmaster's almanac · Pueblo · Manual · Botánico · Edición de campo Heredan: skyline (solo — rama heritage independiente de portal nocturno) ============================================================================ */ :root { /* ── COLOR PALETTE — "Diente de León Heritage" ──────────────────────────── */ /* Sustratos claros — papel y kraft */ --color-kraft: #E8DDC4; /* fondo principal (era night) */ --color-cream: #F5E5C8; /* fondo secundario, mantequilla */ --color-paper: #FBF7EE; /* cards más limpias, panels */ /* Acentos cálidos */ --color-amber: #D9A441; /* miel cruda — acento decorativo principal */ --color-amber-soft: #E8C078; /* hover, highlights */ --color-amber-deep: #B8821A; /* miel oscura — uso en texto grande (≥18pt) */ /* Terracota y cobre */ --color-terracota: #9C3E1C; /* base oscura cálida — hero alt, secciones contrastantes */ --color-copper: #B8826B; /* cobre oxidado — detalle ornamental */ --color-copper-soft: #D4A88E; --color-copper-deep: #8A5540; /* Tinta café / chocolate heritage — 100% cálido, CERO azul */ --color-ink: #2E1F0E; /* café/chocolate profundo, casi negro cálido */ --color-ink-soft: #4A3520; /* café medio — body text sobre kraft/paper */ --color-ink-mute: #7A6448; /* café claro — captions, metadata */ /* Musgo botánico */ --color-moss: #3D4A2D; /* verde musgo — detalle ornamental */ --color-moss-soft: #5C6B45; /* ── ALIAS SEMÁNTICOS — Light mode dominante ───────────────────────────── Los tokens --color-night* ahora mapean a CLAROS. El sitio es kraft/paper/cream como base. Las excepciones oscuras (.hero, .site-footer) usan valores explícitos en skyline-v20.css. ──────────────────────────────────────────────────────────────────────── */ --color-night: var(--color-kraft); /* fondo principal → kraft claro */ --color-night-soft: var(--color-paper); /* surface/cards → paper claro */ --color-night-deep: var(--color-cream); /* fondo alternante → cream */ /* cream-soft y cream-mute siguen siendo ink-soft/ink-mute (texto oscuro) */ --color-cream-soft: var(--color-ink-soft); --color-cream-mute: var(--color-ink-mute); --color-bg: var(--color-kraft); --color-text: var(--color-ink); --color-text-strong: var(--color-ink); --color-text-mute: var(--color-ink-mute); --color-accent: var(--color-amber); --color-accent-2: var(--color-copper); --color-surface: var(--color-cream); /* ── TYPOGRAPHY ──────────────────────────────────────────────────────────── */ --font-display: 'Fraunces', 'Cormorant Garamond', Georgia, serif; --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-script: 'Italianno', 'Petit Formal Script', cursive; --font-accent: var(--font-script); /* Type scale — clamp(min, fluid, max) */ --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem); --text-sm: clamp(0.875rem, 0.8rem + 0.375vw, 1rem); --text-base: clamp(1rem, 0.9rem + 0.5vw, 1.125rem); --text-lg: clamp(1.125rem, 1rem + 0.625vw, 1.375rem); --text-xl: clamp(1.5rem, 1.25rem + 1.25vw, 2rem); --text-2xl: clamp(2rem, 1.5rem + 2.5vw, 3rem); --text-3xl: clamp(2.5rem, 1.75rem + 3.75vw, 4.5rem); --text-4xl: clamp(3rem, 2rem + 5vw, 6rem); --text-hero: clamp(3.5rem, 2.5rem + 5vw, 7rem); --weight-light: 200; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --weight-black: 900; --leading-tight: 1.1; --leading-snug: 1.25; --leading-normal: 1.5; --leading-relaxed: 1.7; --tracking-tight: -0.02em; --tracking-normal: 0; --tracking-wide: 0.05em; --tracking-wider: 0.1em; --tracking-widest: 0.18em; /* ── SPACING ─────────────────────────────────────────────────────────────── */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; --space-20: 5rem; --space-24: 6rem; --space-32: 8rem; --space-section: clamp(4rem, 3rem + 5vw, 8rem); --space-section-lg: clamp(6rem, 4rem + 8vw, 12rem); /* ── LAYOUT ──────────────────────────────────────────────────────────────── */ --container-sm: 640px; --container-md: 768px; --container-lg: 1024px; --container-xl: 1280px; --container-2xl: 1440px; --container-prose: 65ch; --container-page: 1280px; /* ── BORDERS & RADII ─────────────────────────────────────────────────────── */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 16px; --radius-xl: 24px; --radius-pill: 9999px; --border-hairline: 1px; --border-thin: 2px; --border-thick: 3px; /* ── ELEVATION — sombras cálidas café/madera sobre fondos claros ────────── */ --shadow-sm: 0 1px 2px rgba(46, 31, 14, 0.08), 0 1px 3px rgba(46, 31, 14, 0.12); --shadow-md: 0 4px 6px rgba(46, 31, 14, 0.10), 0 10px 15px rgba(46, 31, 14, 0.14); --shadow-lg: 0 10px 15px rgba(46, 31, 14, 0.12), 0 20px 40px rgba(46, 31, 14, 0.18); --shadow-xl: 0 20px 25px rgba(46, 31, 14, 0.15), 0 40px 80px rgba(46, 31, 14, 0.22); --shadow-amber: 0 8px 20px rgba(217, 164, 65, 0.25), 0 16px 40px rgba(217, 164, 65, 0.14); --shadow-copper: 0 8px 20px rgba(184, 130, 107, 0.25), 0 16px 40px rgba(184, 130, 107, 0.15); --shadow-inset-light: inset 0 1px 0 rgba(255, 255, 255, 0.60), inset 0 -1px 0 rgba(46, 31, 14, 0.08); /* ── MOTION ──────────────────────────────────────────────────────────────── */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --duration-fast: 150ms; --duration-base: 300ms; --duration-slow: 600ms; --duration-slower: 1000ms; /* ── GLASS — ahora sobre fondos claros (kraft/cream) ────────────────────── */ --blur-sm: blur(4px); --blur-md: blur(12px); --blur-lg: blur(24px); --blur-glass: blur(16px) saturate(1.2); /* Glass surfaces — light mode (kraft translúcido) */ --glass-bg: rgba(245, 229, 200, 0.65); /* cream con alpha */ --glass-border: rgba(46, 31, 14, 0.14); /* café tenue — borde cálido */ --glass-bg-amber: rgba(217, 164, 65, 0.09); /* miel muy sutil */ --glass-border-strong: rgba(46, 31, 14, 0.30); /* hover */ --glass-bg-deep: rgba(46, 31, 14, 0.92); /* header/modals — café oscuro cálido */ /* Glass sobre terracota (secciones oscuras) */ --glass-bg-dark: rgba(156, 62, 28, 0.55); --glass-border-dark: rgba(217, 164, 65, 0.30); /* Texture grain — calibrado para kraft */ --texture-grain: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 0.55 0 0 0 0 0.42 0 0 0 0 0.22 0 0 0 0.09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); /* Spotlight glow — miel sobre kraft */ --spotlight-color: rgba(217, 164, 65, 0.15); /* ── Z-INDEX ─────────────────────────────────────────────────────────────── */ --z-base: 0; --z-raised: 10; --z-overlay: 100; --z-modal: 1000; --z-toast: 2000; --z-cursor: 9999; /* ── BREAKPOINTS ─────────────────────────────────────────────────────────── */ --bp-sm: 640px; --bp-md: 768px; --bp-lg: 1024px; --bp-xl: 1280px; --bp-2xl: 1440px; } /* Reduce motion */ @media (prefers-reduced-motion: reduce) { :root { --duration-fast: 0ms; --duration-base: 0ms; --duration-slow: 0ms; --duration-slower: 0ms; } }