/* ============================================================ Le Temps — Design System (tokens inlineados, sin @import) Las fuentes se cargan vía en el de cada página. ============================================================ */ /* ---- Color tokens ---- */ :root { --lt-sage: #6F7B62; --lt-sage-soft: #94A681; --lt-terracotta: #BC8A6E; --lt-butter: #EDE3A4; --lt-charcoal: #494848; --lt-black: #1F1D1B; --lt-white: #FFFFFF; --lt-paper: #FBF8F1; --lt-cream: #F4EEE2; --lt-linen: #EAE2D2; --lt-stone: #8A857C; --lt-sage-deep: #57614C; --lt-sage-tint: #E4E8DC; --lt-terra-deep: #9E6E54; --lt-terra-tint: #F1E4DB; --lt-butter-tint: #F7F1D4; --bg: var(--lt-paper); --surface: var(--lt-white); --surface-warm: var(--lt-cream); --surface-sunk: var(--lt-linen); --text-strong: var(--lt-black); --text-body: var(--lt-charcoal); --text-muted: var(--lt-stone); --text-on-dark: var(--lt-paper); --text-on-accent: var(--lt-white); --accent: var(--lt-sage); --accent-hover: var(--lt-sage-deep); --accent-soft: var(--lt-sage-soft); --accent-wash: var(--lt-sage-tint); --warm: var(--lt-terracotta); --warm-hover: var(--lt-terra-deep); --warm-wash: var(--lt-terra-tint); --highlight: var(--lt-butter); --highlight-wash: var(--lt-butter-tint); --border: #E0D8C8; --border-strong: #CBC0AC; --divider: #ECE5D7; --focus-ring: #6F7B62; } /* ---- Typography tokens ---- */ :root { --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif; --font-serif: 'Playfair Display', Georgia, serif; --font-body: 'Lora', Georgia, 'Times New Roman', serif; --font-ui: 'Montserrat', system-ui, -apple-system, Segoe UI, sans-serif; --font-script: 'Allura', 'Snell Roundhand', cursive; --fw-light: 300; --fw-regular: 400; --fw-medium: 500; --fw-semibold:600; --fw-bold: 700; --text-display: 64px; --text-h1: 48px; --text-h2: 36px; --text-h3: 27px; --text-h4: 21px; --text-lg: 19px; --text-base: 17px; --text-sm: 15px; --text-xs: 13px; --text-label: 12px; --lh-tight: 1.08; --lh-snug: 1.22; --lh-body: 1.66; --lh-ui: 1.4; --tracking-display: -0.01em; --tracking-body: 0; --tracking-label: 0.18em; --tracking-wide: 0.06em; } /* ---- Spacing, radii, shadows, layout ---- */ :root { --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 128px; --radius-xs: 4px; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-xl: 24px; --radius-pill: 999px; --hairline: 1px solid var(--border); --rule: 1px solid var(--border-strong); --shadow-xs: 0 1px 2px rgba(73,72,72,.06); --shadow-sm: 0 2px 8px rgba(73,72,72,.07); --shadow-md: 0 8px 24px rgba(73,72,72,.09); --shadow-lg: 0 18px 48px rgba(73,72,72,.12); --shadow-inset: inset 0 1px 2px rgba(73,72,72,.06); --container: 1180px; --container-narrow: 760px; --gutter: clamp(20px, 5vw, 64px); --ease: cubic-bezier(0.22, 0.61, 0.36, 1); --ease-soft: cubic-bezier(0.4, 0, 0.2, 1); --dur-fast: 140ms; --dur: 240ms; --dur-slow: 420ms; }