/* ────────────────────────────────────────────────────────────────────────── Terrano Design Tokens Paleta y variables base del panel logistica.terrano.co Pega este archivo tal cual en tu proyecto e impórtalo antes que cualquier otro CSS. Activa dark mode con . ────────────────────────────────────────────────────────────────────────── */ :root{ /* ── Neutros ─────────────────────────────────────────────── */ --bg: #f4f4f0; /* fondo de página (beige cálido) */ --surface: #ffffff; /* cards, modales, sidebar */ --surface2: #f0f0ea; /* hover sutil, filas alternadas */ --border: #e0dfd8; /* bordes default */ --border2: #d0cfc8; /* bordes de inputs / botones secundarios */ /* ── Marca (amarillo Terrano) ────────────────────────────── */ --yellow: #ffcb00; --yellow-dark: #e6b700; --yellow-light: #fff8d6; --yellow-mid: #ffe066; /* ── Acentos funcionales ─────────────────────────────────── */ --accent: #1a1a18; /* texto sobre amarillo / botón oscuro */ --blue: #2563eb; --blue-light: #eff6ff; --green: #16a34a; --green-light: #f0fdf4; --red: #dc2626; --red-light: #fef2f2; --orange: #ea580c; --orange-light: #fff7ed; /* ── Texto ───────────────────────────────────────────────── */ --text: #1a1a18; --text2: #44443e; --muted: #888880; /* ── Geometría ───────────────────────────────────────────── */ --radius: 12px; --shadow: 0 1px 4px rgba(0,0,0,.08), 0 4px 16px rgba(0,0,0,.06); --shadow-sm: 0 1px 3px rgba(0,0,0,.08); /* ── Layout fijo ─────────────────────────────────────────── */ --sidebar-w: 220px; --header-h: 68px; /* ── Tipografía ──────────────────────────────────────────── */ --font-sans: 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif; --font-serif: Georgia, "Times New Roman", serif; --font-mono: ui-monospace, "Cascadia Mono", "Segoe UI Mono", Menlo, Consolas, monospace; } /* ── Dark mode ─────────────────────────────────────────────── */ html[data-theme="dark"]{ --bg: #111110; --surface: #1e1e1c; --surface2: #262624; --border: #363634; --border2: #444440; --yellow-light: #2a2200; --yellow-mid: #4a3c00; --orange-light: #2a1800; --blue-light: #1e2a4a; --green-light: #0d2318; --red-light: #2a1010; --text: #f0f0ec; --text2: #a8a8a0; --muted: #666660; --shadow: 0 1px 4px rgba(0,0,0,.3), 0 4px 16px rgba(0,0,0,.25); --shadow-sm: 0 1px 3px rgba(0,0,0,.25); }