@import "tailwindcss"; @import "tw-animate-css"; @import "shadcn/tailwind.css"; /* @fontsource-variable JBM + Inter imported from main.tsx as JS modules. */ /* themes-v1: 18 preset palettes. Order matches docs/themes_v1.md §1 with obsidian first (default). Each file declares .theme- for the light variant and .theme-.dark for the dark variant (except ivory/chalk which are light-only). lib/theme.ts owns the class composition on . */ @import "./themes/obsidian.css"; @import "./themes/gunmetal.css"; @import "./themes/espresso.css"; @import "./themes/volcanic-brown.css"; @import "./themes/copper.css"; @import "./themes/gold.css"; @import "./themes/oxblood.css"; @import "./themes/crimson.css"; @import "./themes/elderflower.css"; @import "./themes/plum.css"; @import "./themes/steel-pink.css"; @import "./themes/fuchsia-noir.css"; @import "./themes/matrix.css"; @import "./themes/sage.css"; @import "./themes/ivory.css"; @import "./themes/chalk.css"; @import "./themes/cobalt.css"; @import "./themes/midnight-sapphire.css"; @custom-variant dark (&:is(.dark *)); :root { --background: oklch(1 0 0); --foreground: oklch(0.145 0 0); --card: oklch(1 0 0); --card-foreground: oklch(0.145 0 0); --popover: oklch(1 0 0); --popover-foreground: oklch(0.145 0 0); --primary: oklch(0.205 0 0); --primary-foreground: oklch(0.985 0 0); --secondary: oklch(0.97 0 0); --secondary-foreground: oklch(0.205 0 0); --muted: oklch(0.97 0 0); --muted-foreground: oklch(0.556 0 0); --accent: oklch(0.97 0 0); --accent-foreground: oklch(0.205 0 0); --destructive: oklch(0.577 0.245 27.325); --destructive-foreground: oklch(0.985 0 0); --border: oklch(0.922 0 0); --input: oklch(0.922 0 0); --ring: oklch(0.708 0 0); --chart-1: oklch(0.87 0 0); --chart-2: oklch(0.556 0 0); --chart-3: oklch(0.439 0 0); --chart-4: oklch(0.371 0 0); --chart-5: oklch(0.269 0 0); --radius: 0.625rem; --sidebar: oklch(0.985 0 0); --sidebar-foreground: oklch(0.145 0 0); --sidebar-primary: oklch(0.205 0 0); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.97 0 0); --sidebar-accent-foreground: oklch(0.205 0 0); --sidebar-border: oklch(0.922 0 0); --sidebar-ring: oklch(0.708 0 0); } .dark { --background: oklch(0.145 0 0); --foreground: oklch(0.985 0 0); --card: oklch(0.205 0 0); --card-foreground: oklch(0.985 0 0); --popover: oklch(0.205 0 0); --popover-foreground: oklch(0.985 0 0); --primary: oklch(0.922 0 0); --primary-foreground: oklch(0.205 0 0); --secondary: oklch(0.269 0 0); --secondary-foreground: oklch(0.985 0 0); --muted: oklch(0.269 0 0); --muted-foreground: oklch(0.708 0 0); --accent: oklch(0.269 0 0); --accent-foreground: oklch(0.985 0 0); --destructive: oklch(0.704 0.191 22.216); --destructive-foreground: oklch(0.985 0 0); --border: oklch(1 0 0 / 10%); --input: oklch(1 0 0 / 15%); --ring: oklch(0.556 0 0); --chart-1: oklch(0.87 0 0); --chart-2: oklch(0.556 0 0); --chart-3: oklch(0.439 0 0); --chart-4: oklch(0.371 0 0); --chart-5: oklch(0.269 0 0); --sidebar: oklch(0.205 0 0); --sidebar-foreground: oklch(0.985 0 0); --sidebar-primary: oklch(0.488 0.243 264.376); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.269 0 0); --sidebar-accent-foreground: oklch(0.985 0 0); --sidebar-border: oklch(1 0 0 / 10%); --sidebar-ring: oklch(0.556 0 0); } @theme inline { --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --color-chart-1: var(--chart-1); --color-chart-2: var(--chart-2); --color-chart-3: var(--chart-3); --color-chart-4: var(--chart-4); --color-chart-5: var(--chart-5); --color-sidebar: var(--sidebar); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring); --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); --font-sans: "Inter Variable", "Inter", system-ui, sans-serif; --font-mono: "JetBrains Mono Variable", ui-monospace, SFMono-Regular, monospace; --animate-spin-slow: spin 1.2s linear infinite; } @layer base { * { @apply border-border outline-ring/50; } body { @apply bg-background text-foreground; } html { @apply font-sans; } } /* * iOS Safari auto-enlarges text in narrow viewports (anti-zoom). On its own * that's fine for HTML chrome, but xterm.js measures its cell width from a * hidden text-measure element — so when iOS up-sizes that element, xterm * computes wider cells and the terminal ends up at fewer cols than it should. * In opencode this surfaces as the small fragmented banner instead of the * big chunky one (opencode picks the banner glyph set based on terminal * width). 100% disables the auto-adjust and keeps boocode at the same * effective cols as boolab on the same iPhone. */ html, body { -webkit-text-size-adjust: 100% !important; -ms-text-size-adjust: 100% !important; text-size-adjust: 100% !important; } /* iOS Safari auto-zooms when a user taps an input/textarea whose font-size * is under 16px. Pin every input/textarea/select to 16px (boolab pattern) * to suppress the zoom — applies globally; specific components can override * with `text-base` or inline if a smaller visual is intentional. */ input, textarea, select { font-size: 16px !important; } /* * xterm.js overrides (boolab pattern — see /opt/boolab/frontend/src/styles/globals.css). * * Why these live in a global stylesheet, not in an inline