/* ============================================================ FLEUR DE FOUET — theme.css ------------------------------------------------------------ Paleta única japonais-française washi. Tema claro para todo el mundo, siempre. No seguimos prefers-color-scheme: ff-theme.js fija data-theme="light" en antes del paint. ============================================================ */ :root { --bg: #faf7f2; --surface: #ffffff; --surface-warm: #f5f0e8; --ink: #1a1a1a; --ink-light: #3a3a3a; --ink-muted: #8a8278; --ink-faint: #c4bdb3; --accent: #8b2d2d; --accent-light: #a94444; --accent-dim: rgba(139, 45, 45, 0.08); --border: rgba(26, 26, 26, 0.08); --border-strong: rgba(26, 26, 26, 0.15); --success: #2d6b3f; --shadow-soft: 0 8px 30px rgba(0, 0, 0, 0.06); color-scheme: light; } /* === Estados editoriales (loading / empty / error) === */ .ff-state { padding: 26px 22px; text-align: center; font-family: 'EB Garamond', serif; color: var(--ink-light); background: transparent; } .ff-state-loading { display: flex; align-items: center; justify-content: center; gap: 12px; font-style: italic; color: var(--ink-muted); font-size: 14px; letter-spacing: 0.01em; } .ff-state-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); animation: ffStateDot 1.2s cubic-bezier(0.4, 0, 0.6, 1) infinite; } @keyframes ffStateDot { 0%, 100% { opacity: 0.35; transform: scale(0.8); } 50% { opacity: 1; transform: scale(1.15); } } .ff-state-empty, .ff-state-error { padding: 36px 24px 40px; } .ff-state-empty .ff-state-title, .ff-state-error .ff-state-title { font-family: 'Cormorant Garamond', serif; font-size: 20px; font-weight: 400; color: var(--ink); margin-bottom: 8px; line-height: 1.25; } .ff-state-empty .ff-state-sub, .ff-state-error .ff-state-sub { font-family: 'EB Garamond', serif; font-style: italic; font-size: 14px; color: var(--ink-muted); line-height: 1.55; max-width: 420px; margin: 0 auto; } .ff-state-error .ff-state-title { color: var(--accent); }