/** * MyHotelReports Design System — colors & type * * Lifted from `myhotelreports/client/src/app.css` (Tailwind v4 @theme inline). * All product colors are OKLCH; status colors are surfaced as `--status-*` * tokens and consumed in components as `bg-status-warning/10` etc. * * Light + dark variants. Toggle by adding `.dark` to or . */ @import url("https://fonts.googleapis.com/css2?family=Heebo:wght@300;400;500;600;700&display=swap"); :root { /* Brand */ --font-sans: "Heebo", system-ui, -apple-system, sans-serif; /* Radii */ --radius: 1rem; --radius-btn: 0.75rem; /* buttons, inputs, sidebar items */ --radius-card: 1rem; /* cards, dialogs, panels */ --radius-badge: 0.5rem; /* outline badges, dropdown items */ /* Elevation */ --shadow-card: 0px 4px 20px -2px rgba(50, 50, 71, 0.08); --shadow-overlay: 0px 4px 20px -2px rgba(50, 50, 71, 0.12); /* Status (semantic) */ --status-warning: oklch(0.75 0.15 70); --status-success: oklch(0.60 0.15 155); --status-danger: oklch(0.577 0.245 27.325); --status-info: oklch(0.55 0.15 250); --status-neutral: oklch(0.55 0.01 75); /* Surfaces & ink — light, cool teal-navy palette */ --background: oklch(0.99 0.004 220); --foreground: oklch(0.20 0.025 220); --card: oklch(1 0 0); --card-foreground: oklch(0.20 0.025 220); --popover: oklch(1 0 0); --popover-foreground: oklch(0.20 0.025 220); /* Brand — deep teal-navy primary, cyan accent */ --primary: oklch(0.36 0.075 220); --primary-foreground: oklch(1 0 0); --brand-accent: oklch(0.78 0.095 215); --brand-accent-foreground: oklch(0.20 0.04 220); --secondary: oklch(0.955 0.008 220); --secondary-foreground: oklch(0.25 0.025 220); --muted: oklch(0.965 0.008 220); --muted-foreground: oklch(0.50 0.02 220); --accent: oklch(0.94 0.025 215); --accent-foreground: oklch(0.20 0.025 220); --destructive: oklch(0.577 0.245 27.325); --destructive-foreground: oklch(1 0 0); --border: oklch(0.92 0.012 220); --input: oklch(0.92 0.012 220); --ring: oklch(0.55 0.10 215); /* Charts */ --chart-1: oklch(0.36 0.075 220); --chart-2: oklch(0.78 0.095 215); --chart-3: oklch(0.55 0.10 215); --chart-4: oklch(0.65 0.10 200); --chart-5: oklch(0.45 0.08 240); /* Auth panel + chat bubbles */ --auth-panel: oklch(0.18 0.04 220); --auth-panel-foreground: oklch(0.95 0.01 220); --chat-received: oklch(0.93 0.008 220); --chat-received-foreground: oklch(0.20 0.025 220); --chat-sent: var(--primary); --chat-sent-foreground: var(--primary-foreground); /* Type scale (semantic) */ --text-h1: 1.5rem; /* 24px */ --text-h2: 1.125rem; /* 18px */ --text-h3: 1rem; /* 16px */ --text-body: 1rem; --text-sm: 0.875rem; /* 14px */ --text-xs: 0.75rem; /* 12px */ --text-2xs: 0.625rem; /* 10px */ --leading-tight: 1.25; --leading-normal: 1.5; --tracking-tight: -0.01em; } .dark { --background: oklch(0.16 0.025 220); --foreground: oklch(0.95 0.01 220); --card: oklch(0.20 0.03 220); --card-foreground: oklch(0.95 0.01 220); --popover: oklch(0.20 0.03 220); --popover-foreground: oklch(0.95 0.01 220); --primary: oklch(0.72 0.10 215); --primary-foreground: oklch(0.16 0.025 220); --brand-accent: oklch(0.82 0.10 215); --brand-accent-foreground: oklch(0.16 0.025 220); --secondary: oklch(0.24 0.025 220); --secondary-foreground: oklch(0.95 0.01 220); --muted: oklch(0.24 0.025 220); --muted-foreground: oklch(0.65 0.02 220); --accent: oklch(0.28 0.05 215); --accent-foreground: oklch(0.95 0.01 220); --destructive: oklch(0.704 0.191 22.216); --destructive-foreground: oklch(0.95 0.005 85); --border: oklch(1 0 0 / 12%); --input: oklch(1 0 0 / 15%); --ring: oklch(0.72 0.10 215); --status-warning: oklch(0.78 0.14 70); --status-success: oklch(0.65 0.15 155); --status-danger: oklch(0.704 0.191 22.216); --status-info: oklch(0.62 0.14 250); --status-neutral: oklch(0.60 0.02 220); --auth-panel: oklch(0.12 0.025 220); --auth-panel-foreground: oklch(0.92 0.01 220); --chat-received: oklch(0.30 0.02 220); --chat-received-foreground: oklch(0.92 0.01 220); } /* ─── Base ─────────────────────────────────────────────── */ html, body { font-family: var(--font-sans); background: var(--background); color: var(--foreground); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ─── Semantic typography classes ──────────────────────── */ .mhr-h1 { font-size: var(--text-h1); font-weight: 700; letter-spacing: var(--tracking-tight); line-height: var(--leading-tight); } .mhr-h2 { font-size: var(--text-h2); font-weight: 600; letter-spacing: var(--tracking-tight); line-height: var(--leading-tight); } .mhr-h3 { font-size: var(--text-h3); font-weight: 600; line-height: var(--leading-tight); } .mhr-body { font-size: var(--text-body); font-weight: 400; line-height: var(--leading-normal); } .mhr-sm { font-size: var(--text-sm); font-weight: 400; } .mhr-label { font-size: var(--text-sm); font-weight: 500; } .mhr-xs { font-size: var(--text-xs); font-weight: 400; color: var(--muted-foreground); } .mhr-num { font-variant-numeric: tabular-nums; font-weight: 500; } .mhr-money { font-variant-numeric: tabular-nums; font-weight: 600; } .mhr-total { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--primary); } /* Section header used in P&L tables */ .mhr-section-header { font-size: var(--text-sm); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }