/* ========================================================================== tokens.css — Variables de diseño (colores, tipografía, espaciado). El tema claro es el predeterminado. El oscuro se activa: 1) automáticamente si el sistema lo prefiere (y el usuario no eligió otro), 2) manualmente con . NOTA: los colores que lee JavaScript (--viewport-bg, --preview-bg, --grid-3d) deben escribirse en formato HEX (#rrggbb). ========================================================================== */ :root { color-scheme: light; /* Superficies */ --bg: #eef0f3; --surface: #ffffff; --surface-2: #f5f6f8; --surface-3: #e7e9ee; --border: #d5d9e0; --border-strong: #b9bfca; /* Texto */ --text: #1c2027; --text-muted: #5b6472; --text-inverse: #ffffff; /* Acento (verde azulado, inspirado en la hierba de Minecraft) */ --accent: #1f7a62; --accent-hover: #186551; --accent-soft: #d8efe7; --accent-text: #ffffff; --focus: #2c7be5; /* Estados */ --danger: #c0392b; --danger-soft: #fbe3e0; --warning: #a86400; --warning-soft: #fff1d6; --success: #1f7a3a; --success-soft: #dff3e5; /* Vistas de edición (formato HEX: los lee JavaScript) */ --viewport-bg: #e4e7ec; --preview-bg: #cfd8e3; --grid-3d: #1a1a1a; --grid-2d: rgba(0, 0, 0, 0.14); --checker-a: #d9dce2; --checker-b: #c4c8d0; --unused-area: rgba(40, 46, 58, 0.08); --layer-base: #1f7a62; --layer-overlay: #c2410c; --hover-outline: #2c7be5; /* Tipografía */ --font: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif; --font-mono: ui-monospace, "Cascadia Code", "SF Mono", Menlo, Consolas, monospace; --text-xs: 0.72rem; --text-sm: 0.8125rem; --text-md: 0.9rem; --text-lg: 1.05rem; /* Espaciado y forma */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --radius-sm: 6px; --radius: 10px; --radius-lg: 14px; --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.08); --shadow: 0 6px 20px rgba(16, 24, 40, 0.12); --shadow-lg: 0 18px 50px rgba(16, 24, 40, 0.25); /* Dimensiones del layout */ --topbar-h: 56px; --toolbar-w: 60px; /* Ancho por defecto del panel lateral: ≈365 px en un monitor 1080p (1920 px). El usuario puede cambiarlo arrastrando su borde (ver sidebar-resizer.js). */ --sidebar-w: clamp(300px, 19vw, 380px); --statusbar-h: 30px; --transition: 140ms ease; } /* Tema oscuro automático (preferencia del sistema) */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --bg: #15171b; --surface: #1d2026; --surface-2: #23272e; --surface-3: #2b3038; --border: #343a44; --border-strong: #4a5260; --text: #e8eaee; --text-muted: #9aa3b2; --text-inverse: #0f1114; --accent: #3cc39b; --accent-hover: #5bd3ae; --accent-soft: #173a31; --accent-text: #08110e; --focus: #6aa8ff; --danger: #ff7b6b; --danger-soft: #3d1c19; --warning: #f5b453; --warning-soft: #3a2b12; --success: #5fd38a; --success-soft: #16301f; --viewport-bg: #1f232a; --preview-bg: #262c36; --grid-3d: #000000; --grid-2d: rgba(255, 255, 255, 0.1); --checker-a: #3a3f48; --checker-b: #2f333b; --unused-area: rgba(0, 0, 0, 0.35); --layer-base: #3cc39b; --layer-overlay: #fb923c; --hover-outline: #6aa8ff; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow: 0 6px 20px rgba(0, 0, 0, 0.45); --shadow-lg: 0 18px 50px rgba(0, 0, 0, 0.6); } } /* Tema oscuro elegido manualmente */ :root[data-theme="dark"] { color-scheme: dark; --bg: #15171b; --surface: #1d2026; --surface-2: #23272e; --surface-3: #2b3038; --border: #343a44; --border-strong: #4a5260; --text: #e8eaee; --text-muted: #9aa3b2; --text-inverse: #0f1114; --accent: #3cc39b; --accent-hover: #5bd3ae; --accent-soft: #173a31; --accent-text: #08110e; --focus: #6aa8ff; --danger: #ff7b6b; --danger-soft: #3d1c19; --warning: #f5b453; --warning-soft: #3a2b12; --success: #5fd38a; --success-soft: #16301f; --viewport-bg: #1f232a; --preview-bg: #262c36; --grid-3d: #000000; --grid-2d: rgba(255, 255, 255, 0.1); --checker-a: #3a3f48; --checker-b: #2f333b; --unused-area: rgba(0, 0, 0, 0.35); --layer-base: #3cc39b; --layer-overlay: #fb923c; --hover-outline: #6aa8ff; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow: 0 6px 20px rgba(0, 0, 0, 0.45); --shadow-lg: 0 18px 50px rgba(0, 0, 0, 0.6); }