:root {
  /*
   * Fallback values for the cross-app design tokens. The platform shell owns
   * the canonical `--catenda-*` tokens on :root; the values below mirror them
   * and apply only where the shell's rule is not in effect (standalone dev,
   * Storybook, tests). Nothing in @catenda/ui-components writes `--catenda-*`.
   *
   * Format: HSL triple (no `hsl()` wrapper). The hex comment is for humans
   * only; code reads HSL. Keep both in sync with the shell's values.
   *
   * Tailwind classes (bg-canvas, text-ink-2, bg-status-fail-bg, ...) resolve
   * via `hsl(var(--catenda-X, var(--X)) / <alpha-value>)`: shell wins when
   * present, these fallbacks otherwise.
   *
   * Tokens without the `--catenda-` counterpart (shadcn aliases, typography,
   * form sizing, legacy shadows) are package-local.
   */
  --canvas: 0 0% 95%; /* #f3f3f3 — V2 neutral-bg base */
  --paper: 0 0% 100%; /* #ffffff */
  --row-hover: 240 7% 97%; /* #f7f7f8 */

  --ink: 159 32% 9%; /* #0f1d18 */
  --ink-2: 157 8% 39%; /* #5b6b65 */
  --ink-3: 143 6% 57%; /* #8a978f */

  --line: 160 6% 90%; /* #e4e7e6 */
  --line-soft: 150 6% 94%; /* #eef0ef */

  --brand-green: 149 84% 27%; /* #0b7d42 — V2 primary base */
  --brand-green-soft: 157 36% 91%; /* #e1f1eb — V2 subtle-green-50 */
  --brand-green-ink: 149 83% 16%; /* #074b28 — V2 primary-400 (active) */
  --brand-deep-green: 175 100% 15%; /* #004d47 — V2 brand deep green (logo/branding) */
  --brand-light-green: 138 45% 78%; /* #ade0bc — V2 brand light green (logo/branding) */

  --status-done-bg: 146 39% 93%; /* #e6f4ec */
  --status-done-fg: 150 73% 20%; /* #0e5a34 */
  --status-prog-bg: 42 100% 92%; /* #fff3d6 */
  --status-prog-fg: 39 100% 27%; /* #8a5a00 */
  --status-todo-bg: 214 72% 94%; /* #e6effb */
  --status-todo-fg: 214 63% 33%; /* #1f4d8a */
  --status-fail-bg: 9 87% 94%; /* #fde7e3 */
  --status-fail-fg: 9 75% 35%; /* #9a2a16 */
  --status-neutral-bg: 150 13% 94%; /* #eef2f0 */
  --status-neutral-fg: 153 8% 27%; /* #3f4a45 */

  /* MFE-only (not shell-owned): app-specific surfaces. Hex stays — these
     don't go through the catenda fallback chain. */
  --surface-muted: #fafbfa;

  --shadow-card: 0 1px 0 rgba(15, 29, 24, 0.04), 0 8px 24px rgba(15, 29, 24, 0.06);
  --shadow-pop: 0 12px 36px rgba(15, 29, 24, 0.18), 0 0 0 1px rgba(15, 29, 24, 0.06);

  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius: 10px;
  --radius-lg: 10px;
  --radius-full: 999px;

  /* ── shadcn HSL tokens remapped to design-system values ── */
  --background: 0 0% 95%; /* ≈ #f3f3f3 canvas */
  --foreground: 156 32% 8%; /* ≈ #0f1d18 ink */
  --card: 0 0% 100%; /* paper */
  --card-foreground: 156 32% 8%;
  --popover: 0 0% 100%;
  --popover-foreground: 156 32% 8%;
  --primary: 149 84% 27%; /* ≈ #0b7d42 brand-green */
  --primary-foreground: 0 0% 100%;
  --secondary: 157 36% 91%; /* brand-green-soft */
  --secondary-foreground: 149 83% 16%; /* brand-green-ink */
  --muted: 240 5% 96%;
  --muted-foreground: 152 6% 39%; /* ink-2 */
  --accent: 157 36% 91%;
  --accent-foreground: 149 83% 16%;
  --destructive: 11 75% 35%; /* status-fail-fg */
  --destructive-foreground: 0 0% 100%;
  --border: 150 4% 90%; /* line */
  --input: 150 4% 90%;
  --ring: 149 84% 27%;

  /* ── Typography scale ── */
  --font-sans: ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-size-2xs: 0.6875rem; /* 11px — eyebrow labels, badges, shortcuts */
  --font-size-xs: 0.75rem; /* 12px — helper text, captions */
  --font-size-sm: 0.8125rem; /* 13px — body copy in dense UI */
  --font-size-base: 0.875rem; /* 14px — default body text */
  --font-size-lg: 1rem; /* 16px — primary labels */
  --font-size-xl: 1.125rem; /* 18px — page sub-headings */
  --font-size-2xl: 1.375rem; /* 22px — page headings */
  --font-size-4xl: 2.5rem; /* 40px — display numbers (dashboards) */
  --line-height-tight: 1.4;
  --line-height-normal: 1.6;

  /* ── Form sizing ── */
  --input-height: 2.5rem;
  --input-height-sm: 2rem;

  /* ── Legacy shadows (consumed via Tailwind shadow-sm/shadow/shadow-lg) ── */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 4px 20px rgba(0, 0, 0, 0.1);
}