/* Mono face for --font-mono — loaded from Google Fonts CDN (no self-hosting). * Google's stylesheet supplies the @font-face declarations automatically; the * --font-mono token below stays unchanged. Must precede all other rules. */ @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&display=swap'); /** * ============================================================================ * apps/web/app/globals.css * ---------------------------------------------------------------------------- * Tailwind base + Cenora design tokens. Engineers paste this into * `apps/web/app/globals.css` in a real Next.js app and uncomment the @tailwind * directives. The sandbox preview uses the Tailwind CDN which pulls base/ * components/utilities automatically — so those three lines are commented. * ============================================================================ */ /* @tailwind base; * @tailwind components; * @tailwind utilities; */ /* ─── DESIGN TOKENS ───────────────────────────────────────────────────────── * All component classNames reference these via Tailwind's theme.extend * (see tailwind.config.ts → preview script in cenora-ui.html). Tokens here * are the source of truth; tailwind.config mirrors them. * ───────────────────────────────────────────────────────────────────────── */ :root { /* Brand */ --brand: #0D4A4A; --brand-hover: #1A6B6B; --brand-mid: #1A6B6B; --brand-light: #2A8A8A; --brand-soft: #EAF3F3; --accent: #D4A96A; --accent-soft: #FBF1DC; --accent-deep: #A8843F; --cream: #F7F2EB; --cream-deep: #F2EDE5; /* Ink (neutral grayscale) */ --ink: #1A1A1A; --ink-soft: #4A4A4A; --ink-mute: #8A8A8A; --ink-faint: #B5B0A8; /* Borders */ --divider: #E2DDD6; --divider-strong: #C9C1B4; --divider-soft: #EFEAE3; /* Status */ --success: #27704F; --success-soft: #DEEDE6; --warn: #C88A2E; --warn-soft: #FBF1DC; --danger: #C0392B; --danger-soft: #FBEAE8; --info: #2563EB; --info-soft: #DDE7FB; /* Surface */ --bg-app: #FBF8F2; --bg-surface: #FFFFFF; --bg-muted: #F2EDE5; /* Type */ --font-serif: Georgia, 'Times New Roman', serif; --font-sans: Arial, Helvetica, sans-serif; --font-mono: 'JetBrains Mono', 'SF Mono', Consolas, monospace; /* Layout */ --sidebar-w: 224px; --topbar-h: 52px; /* Shadow (restrained — ERP, not consumer SaaS) */ --shadow-sm: 0 1px 2px rgba(15,20,25,.06), 0 0 0 1px rgba(15,20,25,.03); --shadow-md: 0 6px 16px -4px rgba(15,20,25,.10), 0 2px 4px rgba(15,20,25,.04); --shadow-lg: 0 18px 40px -12px rgba(15,20,25,.18), 0 4px 8px rgba(15,20,25,.06); --ring-focus: 0 0 0 3px rgba(212,169,106,.35); --scheme: light; /* @kind other */ color-scheme: light; } /* ─── BRAND COLOR THEMES ─────────────────────────────────────────────────── * Independent of light/dark. Applied via `data-brand` on . Each theme * swaps --brand* + --accent*. The base tokens above are the "teal" theme. * Settings panel writes to localStorage 'cenora.brand' and 'cenora.theme'. * ───────────────────────────────────────────────────────────────────────── */ :root[data-brand="teal"] { --brand: #0D4A4A; --brand-hover: #1A6B6B; --brand-mid: #1A6B6B; --brand-light: #2A8A8A; --brand-soft: #EAF3F3; --accent: #D4A96A; --accent-soft: #FBF1DC; --accent-deep: #A8843F; } :root[data-brand="ink"] { --brand: #1A2433; --brand-hover: #2A3548; --brand-mid: #2A3548; --brand-light: #3F4D66; --brand-soft: #E9ECF1; --accent: #C39A4C; --accent-soft: #F5E9D0; --accent-deep: #9C7733; } :root[data-brand="forest"] { --brand: #1F4A33; --brand-hover: #2A6B49; --brand-mid: #2A6B49; --brand-light: #3F8A60; --brand-soft: #EAF3EE; --accent: #C09A52; --accent-soft: #F4EAD2; --accent-deep: #927330; } :root[data-brand="burgundy"] { --brand: #5C1F2A; --brand-hover: #7A2C3A; --brand-mid: #7A2C3A; --brand-light: #993D4D; --brand-soft: #F5EAEB; --accent: #C9A152; --accent-soft: #F4EAD2; --accent-deep: #927330; } :root[data-brand="midnight"] { --brand: #1B2640; --brand-hover: #2E3B59; --brand-mid: #2E3B59; --brand-light: #4A5876; --brand-soft: #E7EAF2; --accent: #B8A1E0; --accent-soft: #EBE3F7; --accent-deep: #7556A8; } :root[data-brand="slate"] { --brand: #334155; --brand-hover: #475569; --brand-mid: #475569; --brand-light: #64748B; --brand-soft: #EAEEF3; --accent: #EA8A4B; --accent-soft: #FBE5D2; --accent-deep: #B45F25; } :root[data-brand="plum"] { --brand: #4A1942; --brand-hover: #6B2A5F; --brand-mid: #6B2A5F; --brand-light: #8E3F7E; --brand-soft: #F1E6EE; --accent: #D9A85C; --accent-soft: #F7ECD3; --accent-deep: #9F7530; } :root[data-brand="copper"] { --brand: #5C2A1B; --brand-hover: #7A3D2A; --brand-mid: #7A3D2A; --brand-light: #9B5238; --brand-soft: #F4E9E2; --accent: #D4A96A; --accent-soft: #FBF1DC; --accent-deep: #A8843F; } /* ─── DARK MODE ──────────────────────────────────────────────────────────── * `` flips all surface + ink tokens. Brand teal + * Sand accent stay constant — they're the brand and read well on either * canvas. Status colors stay vivid; their -soft variants get darker so they * read on a dark surface. * ───────────────────────────────────────────────────────────────────────── */ :root[data-theme="dark"] { --cream: #1B2A28; --cream-deep: #243433; --ink: #ECE5D5; --ink-soft: #BFB6A6; --ink-mute: #8E8676; --ink-faint: #5F5A52; --divider: #253635; --divider-strong: #2F4341; --divider-soft: #1C2A29; --brand-soft: #1A3F3D; --accent-soft: #3B2E14; --success-soft: #14302A; --warn-soft: #3A2C13; --danger-soft: #3A1815; --info-soft: #18223E; --bg-app: #0E1614; --bg-surface: #14211F; --bg-muted: #1B2A28; --shadow-sm: 0 1px 2px rgba(0,0,0,.40), 0 0 0 1px rgba(255,255,255,.04); --shadow-md: 0 6px 16px -4px rgba(0,0,0,.55), 0 2px 4px rgba(0,0,0,.30); --shadow-lg: 0 18px 40px -12px rgba(0,0,0,.70), 0 4px 8px rgba(0,0,0,.35); --ring-focus: 0 0 0 3px rgba(212,169,106,.45); --scheme: dark; /* @kind other */ color-scheme: dark; } /* ─── BASE RESETS / GLOBALS ─────────────────────────────────────────────── */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; height: 100%; } body { font-family: var(--font-sans); font-size: 14px; color: var(--ink); background: var(--bg-app); -webkit-font-smoothing: antialiased; } h1, h2, h3, h4, h5, h6 { margin: 0; font-family: var(--font-serif); font-weight: normal; } button, input, textarea, select { font: inherit; color: inherit; } button { cursor: pointer; } [hidden] { display: none !important; } /* Scrollbars — subtle */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-thumb { background: rgba(0,0,0,.1); border-radius: 5px; } ::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,.2); } ::-webkit-scrollbar-track { background: transparent; } [data-theme="dark"] ::-webkit-scrollbar-thumb { background: rgba(255,255,255,.08); } [data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.18); } /* Focus rings */ :focus-visible { outline: none; box-shadow: var(--ring-focus); } /* Selection */ ::selection { background: var(--accent); color: var(--ink); } /* ─── PROTOTYPE-ONLY HELPERS ────────────────────────────────────────────── * Sheet overlay + slide animations (in production: shadcn/ui Sheet uses * Radix Dialog with data-state animations; we hand-roll the equivalent). * ──────────────────────────────────────────────────────────────────────── */ .cn-sheet-overlay { position: fixed; inset: 0; background: rgba(15,20,25,.45); backdrop-filter: blur(2px); z-index: 50; animation: cn-fade-in .18s ease-out; } [data-theme="dark"] .cn-sheet-overlay { background: rgba(0,0,0,.65); } .cn-sheet-content { position: fixed; top: 0; right: 0; bottom: 0; width: 480px; max-width: 90vw; background: var(--bg-surface); border-left: 1px solid var(--divider); box-shadow: var(--shadow-lg); z-index: 51; display: flex; flex-direction: column; animation: cn-slide-in-right .25s cubic-bezier(.22,.61,.36,1); } .cn-sheet-content[data-side="left"] { left: 0; right: auto; border-left: none; border-right: 1px solid var(--divider); animation-name: cn-slide-in-left; } @keyframes cn-fade-in { from { opacity: 0 } to { opacity: 1 } } @keyframes cn-slide-in-right { from { transform: translateX(100%) } to { transform: translateX(0) } } @keyframes cn-slide-in-left { from { transform: translateX(-100%) } to { transform: translateX(0) } } /* Drag-cursor for kanban cards */ .cn-grab { cursor: grab; } .cn-grab:active { cursor: grabbing; } /* ─── RESPONSIVE SHELL ───────────────────────────────────────────────────── * The sidebar is fixed-width on desktop. Below 960px we shrink the desktop * gutter and let the mobile drawer (rendered as ) take over. * The drawer slides in from the left and overlays the canvas. * ──────────────────────────────────────────────────────────────────────── */ @media (max-width: 960px) { :root { --topbar-h: 56px; } .cn-sidebar-desktop { display: none !important; } } @media (min-width: 961px) { .cn-mobile-only { display: none !important; } } /* Mobile drawer — sidebar slides in as overlay */ .cn-sidebar-drawer { position: fixed; top: 0; left: 0; bottom: 0; z-index: 60; width: 264px; max-width: 84vw; animation: cn-slide-in-left .22s cubic-bezier(.22,.61,.36,1); box-shadow: var(--shadow-lg); } /* Dock-right tenants: the drawer follows the menu to the right edge so it * lines up with the (dock-aware) topbar hamburger instead of flying in from * the opposite side. */ .cn-sidebar-drawer.cn-drawer-right { left: auto; right: 0; animation-name: cn-slide-in-right; } .cn-sidebar-backdrop { position: fixed; inset: 0; z-index: 59; background: rgba(0,0,0,.55); animation: cn-fade-in .18s ease-out; } /* Narrow sheet on small screens */ @media (max-width: 640px) { .cn-sheet-content { width: 100vw !important; max-width: 100vw !important; } .cn-search-trigger { display: none !important; } } @media (max-width: 960px) { /* Compress the topbar — hide every breadcrumb segment except the last */ header nav[aria-label="Breadcrumb"] > *:not(:last-child) { display: none; } } /* ─── MOBILE LAYOUT PASS ────────────────────────────────────────────────── * Tightens spacing, collapses two-rail grids, and lets fixed-width tables * scroll horizontally so the prototype stays usable on phones / iPads. * ──────────────────────────────────────────────────────────────────────── */ /* Mobile sidebar drawer — make the inner fill the drawer */ .cn-sidebar-drawer > aside { width: 100% !important; height: 100% !important; } @media (max-width: 960px) { /* Tighter page padding */ main .p-6 { padding: 1rem !important; } main .p-5 { padding: 0.875rem !important; } main .px-5 { padding-left: 1rem !important; padding-right: 1rem !important; } /* Two-rail layouts collapse to single column */ main .grid.grid-cols-\[224px_1fr\], main .grid.grid-cols-\[1fr_440px\], main .grid.grid-cols-\[1fr_420px\], main .grid.grid-cols-\[1fr_400px\], main .grid.grid-cols-\[300px_1fr\], main .grid.grid-cols-\[280px_1fr\], main .grid.grid-cols-\[260px_1fr\] { grid-template-columns: 1fr !important; } /* Multi-column dashboards collapse to two then one */ main .grid.grid-cols-4 { grid-template-columns: repeat(2, 1fr) !important; } main .grid.grid-cols-3 { grid-template-columns: repeat(2, 1fr) !important; } /* Sticky side rails un-stick on mobile so they don't pin */ main aside.sticky, main .sticky.top-4 { position: static !important; } main aside { max-height: none !important; } /* Sheet width caps */ .cn-sheet-content { width: min(100vw, 460px) !important; } /* Topbar — drop the less-essential icon buttons */ header [aria-label="Voice assistant"], header [aria-label="Notifications"], header [aria-label="Settings"] { display: none !important; } header .w-px.h-5 { display: none !important; } /* Tables — force horizontal scroll inside .border .rounded containers */ main .bg-surface.border.rounded-lg > table, main .border.rounded-lg > .overflow-x-auto > table { min-width: 720px; } /* Any unwrapped table inside an overflow container should still scroll */ main table { min-width: 100%; } } @media (max-width: 640px) { main .grid.grid-cols-2 { grid-template-columns: 1fr !important; } /* Hide the org switcher chip on the smallest screens — it stays accessible from settings */ header .cn-org-switcher { display: none !important; } /* Trim the AI button label to icon only */ header button[aria-label="AI Assistant"] span, header button[aria-label="AI Assistant"] > :not(svg):not(:first-child) { display: none !important; } } /* ─── SKIN SYSTEM (Build doc §4) ────────────────────────────────────────── * Two skins driven by the active environment type, applied via data-skin on * . Business uses the locked Cenora palette; Personal consumes the * active theme's --theme-* vars (set by personal/app/themes.js). The Cenora * sand-gold accent is locked across both. These --color-* tokens are the * doc's canonical surface for any skin-aware component. * ──────────────────────────────────────────────────────────────────────── */ [data-skin="business"], :root { --color-primary: #0D4A4A; --color-bg: #F7F2EB; --color-surface: #E8F0EE; --color-text: #1A1A1A; --color-accent: #D4A96A; } [data-skin="personal"] { --color-primary: var(--theme-primary, var(--brand)); --color-bg: var(--theme-bg, var(--bg-app)); --color-surface: var(--theme-surface, var(--bg-surface)); --color-text: var(--theme-text, var(--ink)); --color-accent: #D4A96A; /* always locked */ }