/* ============================================================================= * OtakusCR · tokens.css * * Variables de diseño extraídas de los HTML originales (Web-Prototype/index.html). * Son la única fuente de verdad de color, tipografía, escala y radii. * Se importan desde style.css y desde theme.css del plugin companion. * ============================================================================ */ :root { /* ── Paleta base (dark por defecto) ─────────────────────────────────── */ --bg: #1a2540; --surface: #2D4B73; --fg: #f5f0e8; --muted: #b8c8dc; --border: #3767A6; --accent: #F26716; /* ── Derivados (deben ir tras los base) ─────────────────────────────── */ --accent-soft: color-mix(in oklch, var(--accent) 16%, transparent); --fg-soft: color-mix(in oklch, var(--fg) 6%, transparent); --surface-hover: color-mix(in oklch, var(--surface) 85%, var(--fg) 6%); --bg-elev: color-mix(in oklch, #0a1020 80%, var(--bg) 20%); --shadow-card: 0 8px 24px -10px rgba(0, 0, 0, 0.6); --shadow-pop: 0 16px 48px -12px rgba(0, 0, 0, 0.7); /* ── Tipografía ─────────────────────────────────────────────────────── */ --font-display: 'Bangers', 'Impact', 'Arial Black', serif; --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; --font-mono: ui-monospace, 'SF Mono', Menlo, monospace; /* ── Escala tipográfica (con clamp fluido) ──────────────────────────── */ --fs-h1: clamp(52px, 9vw, 110px); --fs-h2: clamp(28px, 4vw, 44px); --fs-h3: 22px; --fs-lead: 18px; --fs-body: 15px; --fs-meta: 13px; /* ── Espaciado · grilla 8pt ─────────────────────────────────────────── */ --gap-xs: 8px; --gap-sm: 12px; --gap-md: 20px; --gap-lg: 32px; --gap-xl: 56px; --gap-2xl: 96px; --container: 1200px; --gutter: 32px; /* ── Radii ──────────────────────────────────────────────────────────── */ --radius: 10px; --radius-lg: 18px; --radius-pill: 999px; /* ── Motion ─────────────────────────────────────────────────────────── */ --ease: cubic-bezier(0.4, 0, 0.2, 1); --dur-fast: 0.12s; --dur-base: 0.18s; --dur-slow: 0.32s; /* ── z-index ────────────────────────────────────────────────────────── */ --z-topnav: 100; --z-sticky: 90; --z-overlay: 200; --z-popup: 300; --z-modal: 400; --z-toast: 500; } /* ── Tema claro (se activa con [data-theme="light"] en ) ─────────────── */ [data-theme="light"] { --bg: #d6eef8; --surface: #e8f6fc; --fg: #1a2540; --muted: #5478a3; --border: #a8d0e6; --accent: #F2884B; --accent-soft: color-mix(in oklch, var(--accent) 16%, transparent); --fg-soft: color-mix(in oklch, var(--fg) 6%, transparent); --surface-hover: color-mix(in oklch, var(--surface) 80%, var(--fg) 4%); --bg-elev: color-mix(in oklch, #c0e4f5 80%, var(--bg) 20%); --shadow-card: 0 8px 24px -12px rgba(26, 37, 64, 0.18); --shadow-pop: 0 16px 48px -16px rgba(26, 37, 64, 0.22); } /* ── Respeto a prefers-reduced-motion ──────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 0.01ms; --dur-base: 0.01ms; --dur-slow: 0.01ms; } }