apps/desktop/src/renderer/styles.css

@import "tailwindcss";
@source "../../../../packages/ui/src";

/* Bundled Geist fallbacks; maka-tokens.css owns the product font stacks. */
@import "@fontsource-variable/geist";
@import "@fontsource-variable/geist-mono";
@import "overlayscrollbars/overlayscrollbars.css";

@import "./maka-tokens.css";
@import "./reference-shell.css";
@import "./styles/base.css";
@import "./styles/shell-layout.css";
@import "./styles/sidebar.css";
@import "./styles/search-modal.css";
@import "./styles/prompt-suggestions.css";
@import "./styles/deep-research.css";
@import "./styles/onboarding.css";
@import "./styles/empty-state.css";
@import "./styles/module-pages.css";
@import "./styles/field-focus.css";
@import "./styles/settings/select.css";
@import "./styles/segmented.css";
@import "./styles/model-switcher.css";
@import "./styles/chat-header.css";
@import "./styles/task-ledger.css";
@import "./styles/plan-mode.css";
@import "./styles/agent-graph.css";
@import "./styles/error.css";
@import "./styles/toast.css";
@import "./styles/help.css";
@import "./styles/palette.css";
@import "./styles/hero.css";
@import "./styles/chat-message.css" layer(components);
@import "./styles/prose.css" layer(components);
@import "./styles/composer.css";
@import "./styles/composer-mention.css";
@import "./styles/chat-detail.css";
@import "./styles/settings.css";
@import "./styles/markdown-link.css" layer(components);
@import "./styles/permission-dialog.css";
@import "./styles/daily-review.css";
@import "./styles/theme-glass.css";
@import "./styles/prompt-rail.css";
@import "./styles/quote-chip.css";
@import "./styles/quote-side-panel.css";

@theme inline {
  --color-background: var(--background);
  --color-background-elevated: var(--background-elevated);
  --color-foreground: var(--foreground);
  --color-foreground-dimmed: var(--foreground-dimmed);
  --color-card: var(--background);
  --color-card-foreground: var(--foreground);
  --color-popover: var(--background-elevated);
  --color-popover-foreground: var(--foreground);
  --color-primary: var(--action);
  --color-primary-foreground: var(--action-foreground);
  --color-action: var(--action);
  --color-action-foreground: var(--action-foreground);
  --color-secondary: var(--foreground-5);
  --color-secondary-foreground: var(--foreground);
  --color-muted: var(--foreground-5);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: oklch(from var(--accent) 0.985 min(c, 0.003) h);
  --color-link: var(--link);
  --color-focus-ring: var(--focus-ring);
  --color-status-running: var(--status-running);
  --color-nav-active: var(--nav-active);
  --color-toast-accent: var(--toast-accent);
  --color-control: var(--control);
  --color-control-foreground: var(--control-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-text: var(--destructive-text);
  --color-destructive-foreground: oklch(from var(--destructive) 0.985 min(c, 0.003) h);
  --color-info: var(--info);
  --color-info-foreground: var(--info-text);
  --color-success: var(--success);
  --color-success-foreground: var(--success-text);
  --color-warning: var(--warning);
  --color-warning-foreground: var(--warning-text);
  --color-border: var(--border);
  --color-border-strong: var(--border-strong);
  --color-input: var(--border-strong);
  --color-ring: var(--ring);
  --color-foreground-2: var(--foreground-2);
  --color-foreground-3: var(--foreground-3);
  --color-foreground-5: var(--foreground-5);
  --color-foreground-8: var(--foreground-8);
  --color-foreground-10: var(--foreground-10);
  --color-foreground-secondary: var(--foreground-secondary);
  --color-hover: var(--state-hover-bg);
  --color-active: var(--state-selected-bg);
  --color-user-message-bubble: var(--user-message-bubble);

  --radius-sm: var(--radius-control);
  --radius-md: var(--radius-surface);
  --radius-lg: var(--radius-surface);
  --radius-xl: var(--radius-modal);

  --text-xs: var(--font-size-caption);
  --text-sm: var(--font-size-ui);
  --text-base: var(--font-size-base);

  /* fix(#546): pin the text-* paired line-heights to the 4-tier leading
     scale. Without these, bare `text-xs`/`text-sm` utilities carry
     Tailwind's stock ratios (1.333/1.4286) — off-tier values that PR1
     (#526) removed everywhere else. 11px caption is the snug zone;
     13px body (base == ui after the #546 re-tier) stays normal so prose
     keeps a ≥1.5 ratio (WCAG 1.4.12 headroom at the denser body size). */
  --text-xs--line-height: var(--leading-snug);
  --text-sm--line-height: var(--leading-snug);
  --text-base--line-height: var(--leading-normal);

  /* PR-LEADING-CONVERGE-0 (#520 PR1): bridge --leading-* to Tailwind
     leading-* utilities so `var(--leading-*)` in CSS and `leading-*`
     in TSX share one source — same inline-bridge pattern as --text-*. */
  --leading-none: var(--leading-none);
  --leading-tight: var(--leading-tight);
  --leading-snug: var(--leading-snug);
  --leading-normal: var(--leading-normal);

  /* Bridge --font-weight-* to Tailwind font-* utilities. */
  --font-weight-normal: var(--font-weight-normal);
  --font-weight-medium: var(--font-weight-medium);
  --font-weight-semibold: var(--font-weight-semibold);
  --font-weight-bold: var(--font-weight-bold);

  /* Bridge --tracking-* to Tailwind utilities. No tight tier: Maka is
     CJK-first and does not tighten CJK letter spacing. */
  --tracking-normal: var(--tracking-normal);
  --tracking-wide: var(--tracking-wide);
  --tracking-wider: var(--tracking-wider);
  --tracking-widest: var(--tracking-widest);

  /* Export the 4px ruler to Tailwind so the p-N,
     gap-N, m-N utilities share one source with hand-written var(--space-N).
     Without this, Tailwind default --spacing 0.25rem (3.75px under 15px
     root) would keep p-2 at 7.5px while var(--space-2) is 8px — two scales. */
  --spacing: 4px;

  --shadow-maka-panel: 0 0 0 1px var(--border), 0 1px 2px oklch(from var(--foreground) l c h / 0.04), 0 14px 40px oklch(from var(--foreground) l c h / 0.08);
}