/* ============================================================= base.css — Design tokens + 4 temas + reset · 5le Fantasy 2026 Temas: forest (default) | ocean | sunset | violet Se aplican con data-ui-theme="..." en Modo claro/oscuro con data-theme="dark" ============================================================= */ /* ── TOKENS FIJOS (no cambian con el tema) ─────────────────── */ :root { /* Espaciado 4px */ --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; /* Radios */ --radius-sm: 0.375rem; /* 6px */ --radius-md: 0.625rem; /* 10px */ --radius-lg: 0.875rem; /* 14px */ --radius-xl: 1.25rem; /* 20px */ --radius-2xl: 1.75rem; /* 28px */ --radius-full: 9999px; /* Tipografía fluida */ --text-xs: clamp(0.75rem, 0.7rem + 0.2vw, 0.875rem); --text-sm: clamp(0.875rem, 0.82rem + 0.28vw, 1rem); --text-base: clamp(0.9375rem, 0.9rem + 0.2vw, 1.0625rem); --text-lg: clamp(1.0625rem, 0.98rem + 0.5vw, 1.375rem); --text-xl: clamp(1.25rem, 1.1rem + 0.9vw, 1.75rem); --text-2xl: clamp(1.5rem, 1.2rem + 1.5vw, 2.25rem); /* Fuente */ --font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* Transición */ --transition: 160ms cubic-bezier(0.16, 1, 0.3, 1); /* Layout */ --content-default: 1200px; --header-h: 60px; --tabs-h: 0px; /* Posiciones */ --pos-gk: #f59e0b; --pos-def: #3b82f6; --pos-mid: #10b981; --pos-fwd: #ef4444; } /* ══════════════════════════════════════════════════════════════ TEMA 1 · FOREST (verde) — DEFAULT ══════════════════════════════════════════════════════════════ */ :root, [data-ui-theme="forest"] { --c-accent: #16a34a; --c-accent-hover: #15803d; --c-accent-active: #166534; --c-accent-subtle: #dcfce7; --c-accent-muted: #86efac; --c-accent-text: #14532d; --c-link: #2563eb; --c-link-hover: #1d4ed8; --c-link-subtle: #dbeafe; /* Light mode */ --c-bg: #f6f7f9; --c-surface: #ffffff; --c-surface-2: #f3f4f6; --c-surface-3: #e9eaed; --c-surface-hover: #f0f2f4; --c-border: #e2e4e8; --c-divider: #eaebed; --c-text: #111827; --c-text-muted: #6b7280; --c-text-faint: #9ca3af; --c-text-inverse: #ffffff; --c-error: #dc2626; --c-error-subtle: #fee2e2; --c-warning: #d97706; --c-warning-subtle: #fef3c7; --c-success: #16a34a; --c-success-subtle: #dcfce7; --shadow-xs: 0 1px 2px rgba(17,24,39,0.04); --shadow-sm: 0 1px 3px rgba(17,24,39,0.06), 0 1px 8px rgba(17,24,39,0.04); --shadow-md: 0 4px 12px rgba(17,24,39,0.08), 0 1px 3px rgba(17,24,39,0.05); --shadow-lg: 0 10px 30px rgba(17,24,39,0.12), 0 2px 6px rgba(17,24,39,0.06); --shadow-xl: 0 20px 50px rgba(17,24,39,0.15); } [data-ui-theme="forest"][data-theme="dark"], [data-theme="dark"] { --c-accent: #4ade80; --c-accent-hover: #86efac; --c-accent-active: #bbf7d0; --c-accent-subtle: rgba(74,222,128,0.1); --c-accent-muted: rgba(74,222,128,0.25); --c-accent-text: #4ade80; --c-link: #60a5fa; --c-link-hover: #93c5fd; --c-link-subtle: rgba(96,165,250,0.1); --c-bg: #0e1117; --c-surface: #161b22; --c-surface-2: #1c222c; --c-surface-3: #222936; --c-surface-hover: #1e2430; --c-border: rgba(255,255,255,0.08); --c-divider: rgba(255,255,255,0.05); --c-text: #e6edf3; --c-text-muted: #7d8590; --c-text-faint: #484f58; --c-text-inverse: #0e1117; --c-error: #f87171; --c-error-subtle: rgba(248,113,113,0.1); --c-warning: #fbbf24; --c-warning-subtle: rgba(251,191,36,0.1); --c-success: #4ade80; --c-success-subtle: rgba(74,222,128,0.1); --shadow-xs: 0 1px 2px rgba(0,0,0,0.3); --shadow-sm: 0 1px 3px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.03); --shadow-md: 0 4px 12px rgba(0,0,0,0.5); --shadow-lg: 0 10px 30px rgba(0,0,0,0.6); --shadow-xl: 0 20px 50px rgba(0,0,0,0.7); } /* ══════════════════════════════════════════════════════════════ TEMA 2 · OCEAN (azul) ══════════════════════════════════════════════════════════════ */ [data-ui-theme="ocean"] { --c-accent: #2563eb; --c-accent-hover: #1d4ed8; --c-accent-active: #1e40af; --c-accent-subtle: #dbeafe; --c-accent-muted: #93c5fd; --c-accent-text: #1e3a8a; --c-link: #0891b2; --c-link-hover: #0e7490; --c-link-subtle: #cffafe; --c-bg: #f0f5ff; --c-surface: #ffffff; --c-surface-2: #eef2ff; --c-surface-3: #e0e7ff; --c-surface-hover: #eef2ff; --c-border: #c7d2fe; --c-divider: #e0e7ff; --c-text: #1e1b4b; --c-text-muted: #6b7280; --c-text-faint: #a5b4fc; --shadow-xs: 0 1px 2px rgba(37,99,235,0.06); --shadow-sm: 0 1px 3px rgba(37,99,235,0.08), 0 1px 8px rgba(37,99,235,0.05); --shadow-md: 0 4px 12px rgba(37,99,235,0.1), 0 1px 3px rgba(37,99,235,0.06); --shadow-lg: 0 10px 30px rgba(37,99,235,0.12); } [data-ui-theme="ocean"][data-theme="dark"] { --c-accent: #60a5fa; --c-accent-hover: #93c5fd; --c-accent-active: #bfdbfe; --c-accent-subtle: rgba(96,165,250,0.1); --c-accent-muted: rgba(96,165,250,0.25); --c-accent-text: #60a5fa; --c-link: #22d3ee; --c-link-hover: #67e8f9; --c-link-subtle: rgba(34,211,238,0.1); --c-bg: #0a0f1a; --c-surface: #0f172a; --c-surface-2: #162032; --c-surface-3: #1e2a3f; --c-surface-hover: #1a2438; --c-border: rgba(96,165,250,0.12); --c-divider: rgba(96,165,250,0.06); --c-text: #e2e8f0; --c-text-muted: #94a3b8; --c-text-faint: #475569; --c-text-inverse: #0a0f1a; } /* ══════════════════════════════════════════════════════════════ TEMA 3 · SUNSET (naranja cálido) ══════════════════════════════════════════════════════════════ */ [data-ui-theme="sunset"] { --c-accent: #ea580c; --c-accent-hover: #c2410c; --c-accent-active: #9a3412; --c-accent-subtle: #ffedd5; --c-accent-muted: #fdba74; --c-accent-text: #7c2d12; --c-link: #db2777; --c-link-hover: #be185d; --c-link-subtle: #fce7f3; --c-bg: #fffbf5; --c-surface: #ffffff; --c-surface-2: #fff7ed; --c-surface-3: #fef3c7; --c-surface-hover: #fef5eb; --c-border: #fed7aa; --c-divider: #ffedd5; --c-text: #1c1917; --c-text-muted: #78716c; --c-text-faint: #d6d3d1; --shadow-xs: 0 1px 2px rgba(234,88,12,0.06); --shadow-sm: 0 1px 3px rgba(234,88,12,0.08), 0 1px 8px rgba(234,88,12,0.04); --shadow-md: 0 4px 12px rgba(234,88,12,0.1); --shadow-lg: 0 10px 30px rgba(234,88,12,0.12); } [data-ui-theme="sunset"][data-theme="dark"] { --c-accent: #fb923c; --c-accent-hover: #fdba74; --c-accent-active: #fed7aa; --c-accent-subtle: rgba(251,146,60,0.1); --c-accent-muted: rgba(251,146,60,0.25); --c-accent-text: #fb923c; --c-link: #f472b6; --c-link-hover: #f9a8d4; --c-link-subtle: rgba(244,114,182,0.1); --c-bg: #130c05; --c-surface: #1c1208; --c-surface-2: #261a0f; --c-surface-3: #2f2015; --c-surface-hover: #221610; --c-border: rgba(251,146,60,0.12); --c-divider: rgba(251,146,60,0.06); --c-text: #fef3c7; --c-text-muted: #d6d3d1; --c-text-faint: #57534e; --c-text-inverse: #130c05; } /* ══════════════════════════════════════════════════════════════ TEMA 4 · VIOLET (morado/índigo) ══════════════════════════════════════════════════════════════ */ [data-ui-theme="violet"] { --c-accent: #7c3aed; --c-accent-hover: #6d28d9; --c-accent-active: #5b21b6; --c-accent-subtle: #ede9fe; --c-accent-muted: #c4b5fd; --c-accent-text: #4c1d95; --c-link: #db2777; --c-link-hover: #be185d; --c-link-subtle: #fce7f3; --c-bg: #faf7ff; --c-surface: #ffffff; --c-surface-2: #f5f3ff; --c-surface-3: #ede9fe; --c-surface-hover: #f5f2ff; --c-border: #ddd6fe; --c-divider: #ede9fe; --c-text: #1e1b4b; --c-text-muted: #6b7280; --c-text-faint: #a78bfa; --shadow-xs: 0 1px 2px rgba(124,58,237,0.06); --shadow-sm: 0 1px 3px rgba(124,58,237,0.09), 0 1px 8px rgba(124,58,237,0.05); --shadow-md: 0 4px 12px rgba(124,58,237,0.1); --shadow-lg: 0 10px 30px rgba(124,58,237,0.14); } [data-ui-theme="violet"][data-theme="dark"] { --c-accent: #a78bfa; --c-accent-hover: #c4b5fd; --c-accent-active: #ddd6fe; --c-accent-subtle: rgba(167,139,250,0.1); --c-accent-muted: rgba(167,139,250,0.25); --c-accent-text: #a78bfa; --c-link: #f472b6; --c-link-hover: #f9a8d4; --c-link-subtle: rgba(244,114,182,0.1); --c-bg: #0d0b18; --c-surface: #13101f; --c-surface-2: #1a1629; --c-surface-3: #221d33; --c-surface-hover: #1e192e; --c-border: rgba(167,139,250,0.12); --c-divider: rgba(167,139,250,0.06); --c-text: #ede9fe; --c-text-muted: #a78bfa; --c-text-faint: #4c1d95; --c-text-inverse: #0d0b18; } /* ── ALIAS compatibilidad (mapeo → variables antiguas) ──────── */ :root, [data-ui-theme] { --color-primary: var(--c-accent); --color-primary-hover: var(--c-accent-hover); --color-primary-subtle: var(--c-accent-subtle); --color-accent: var(--c-link); --color-accent-hover: var(--c-link-hover); --color-accent-subtle: var(--c-link-subtle); --color-bg: var(--c-bg); --color-surface: var(--c-surface); --color-surface-2: var(--c-surface-2); --color-surface-3: var(--c-surface-3); --color-border: var(--c-border); --color-divider: var(--c-divider); --color-text: var(--c-text); --color-text-muted: var(--c-text-muted); --color-text-faint: var(--c-text-faint); --color-error: var(--c-error, #dc2626); --color-error-subtle: var(--c-error-subtle, #fee2e2); --color-warning: var(--c-warning, #d97706); --color-warning-subtle: var(--c-warning-subtle, #fef3c7); } /* ── RESET + BASE ───────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + var(--tabs-h) + 16px); } body { min-height: 100dvh; font-family: var(--font-body); font-size: var(--text-base); line-height: 1.6; color: var(--c-text); background: var(--c-bg); transition: background-color 0.25s, color 0.25s; } img, svg, canvas { display: block; max-width: 100%; } input, button, textarea, select { font: inherit; color: inherit; } h1,h2,h3,h4 { text-wrap: balance; line-height: 1.2; } p, li { text-wrap: pretty; max-width: 72ch; } button { cursor: pointer; background: none; border: none; } ul { list-style: none; } ::selection { background: var(--c-accent-subtle); } :focus-visible { outline: 2px solid var(--c-accent); outline-offset: 3px; border-radius: var(--radius-sm); } a, button, [role="button"], input, select { transition: color var(--transition), background var(--transition), border-color var(--transition), box-shadow var(--transition), transform var(--transition); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } .hidden { display: none !important; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border-width: 0; } .sr-only-focusable:focus { position: fixed; top: 1rem; left: 1rem; width: auto; height: auto; clip: auto; white-space: normal; background: var(--c-accent); color: #fff; padding: 0.5rem 1rem; border-radius: var(--radius-md); z-index: 9999; }