/* ============================================================ Manotan Terminal — Design System Clean, sharp, professional. No rounded cards. (Design tokens provided by the project. Tailwind import removed so the app runs fully self-contained with no build step.) Default theme is LIGHT (see :root below). Dark theme lives under :root[data-theme="dark"] and is toggled at runtime. ============================================================ */ :root { --page-space-bottom: 0; /* Main Brand Palette */ --color-primary: #ff6b35; --color-primary-contrast: #ffffff; --color-primary-dark-1: #e5522c; --color-primary-dark-2: #cc4a27; --color-primary-dark-3: #b34122; --color-primary-dark-4: #99381d; --color-primary-dark-5: #662513; --color-primary-dark-6: #331209; --color-primary-dark-7: #1a0905; --color-primary-accent-1: #ff7a3d; --color-primary-accent-2: #ff5a1f; --color-primary-accent-3: #d9481e; --color-primary-alpha-10: #ff6b3519; --color-primary-alpha-20: #ff6b3533; --color-primary-alpha-40: #ff6b3566; --color-primary-hover: var(--color-primary-dark-1); --color-primary-active: var(--color-primary-dark-2); /* Core Backgrounds */ --color-body: #0f0f0f; --color-box-header: #171717; --color-box-body: #121212; --color-menu: #141414; --color-card: #181818; --color-nav-bg: #101010; --color-secondary-nav-bg: #161616; --color-footer: #0c0c0c; /* Components */ --color-button: var(--color-primary); --color-code-bg: #1e1e1e; --color-project-column-bg: #151515; --color-secondary-bg: #1a1a1a; /* Interaction States */ --color-hover: #242424; --color-hover-opaque: #2a2a2a; --color-active: #333333; /* Inputs */ --color-input-background: #151515; --color-input-border: #3a3a3a; --color-input-border-hover: var(--color-primary); /* Secondary Palette */ --color-secondary: #2b2b2b; --color-secondary-dark-1: #242424; --color-secondary-dark-2: #1c1c1c; --color-secondary-dark-3: #141414; --color-secondary-dark-4: #0d0d0d; /* Borders and Dividers */ --color-light-border: #333333; --color-timeline: #3a3a3a; /* Text */ --color-text-dark: #f4f4f4; --color-text: #e6e6e6; --color-text-muted: #b3b3b3; --color-text-inverse: #111111; /* Status */ --color-success: #3fb950; --color-warning: #d29922; --color-danger: #f85149; --color-info: #58a6ff; color-scheme: dark; } /* ============================================================ Light theme — same brand orange + status colours, just an inverted (white) surface palette. Toggled via . ============================================================ */ :root[data-theme="light"] { /* Core Backgrounds */ --color-body: #f5f5f5; --color-box-header: #ffffff; --color-box-body: #ffffff; --color-menu: #ffffff; --color-card: #ffffff; --color-nav-bg: #ffffff; --color-secondary-nav-bg: #f2f2f2; --color-footer: #f0f0f0; /* Components */ --color-code-bg: #f0f0f0; --color-project-column-bg: #f2f2f2; --color-secondary-bg: #f4f4f4; /* Interaction States */ --color-hover: #ececec; --color-hover-opaque: #e4e4e4; --color-active: #dcdcdc; /* Inputs */ --color-input-background: #ffffff; --color-input-border: #d0d0d0; --color-input-border-hover: var(--color-primary); /* Secondary Palette */ --color-secondary: #ededed; --color-secondary-dark-1: #e4e4e4; --color-secondary-dark-2: #d8d8d8; --color-secondary-dark-3: #cfcfcf; --color-secondary-dark-4: #c4c4c4; /* Borders and Dividers */ --color-light-border: #dcdcdc; --color-timeline: #cfcfcf; /* Text */ --color-text-dark: #111111; --color-text: #1f1f1f; --color-text-muted: #5c5c5c; --color-text-inverse: #f4f4f4; /* Slightly stronger status colours for contrast on white */ --color-success: #1a7f37; --color-warning: #9a6700; --color-danger: #cf222e; --color-info: #0969da; color-scheme: light; } * { box-sizing: border-box; } html, body { height: 100%; margin: 0; } body { background: var(--color-body); color: var(--color-text); font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; } /* Monospace for numbers / technical readouts */ .font-mono-num { font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace; font-variant-numeric: tabular-nums; } /* Thin custom scrollbar */ *::-webkit-scrollbar { width: 8px; height: 8px; } *::-webkit-scrollbar-track { background: transparent; } *::-webkit-scrollbar-thumb { background: var(--color-light-border); } *::-webkit-scrollbar-thumb:hover { background: var(--color-active); } /* Reusable status dot */ .status-dot { width: 8px; height: 8px; flex-shrink: 0; }