:root {
  /* Core palette */
  --jl-color-ink: #111111;
  --jl-color-ink-mid: #3d3d3d;
  --jl-color-slate: #6b7280;
  --jl-color-muted: #9ca3af;
  --jl-color-canvas: #fafafa;
  --jl-color-white: #ffffff;
  --jl-color-signal: #c8e84a;
  --jl-color-signal-hover: #b8d93a;

  /* Legacy aliases (kept for brand-board.html) */
  --jl-color-graphite: #111111;
  --jl-color-steel: #2a2a2a;
  --jl-color-bone: #fafafa;

  /* Surfaces */
  --jl-surface-page: var(--jl-color-canvas);
  --jl-surface-card: var(--jl-color-white);
  --jl-surface-dark: var(--jl-color-ink);

  /* Text */
  --jl-text-primary: var(--jl-color-ink);
  --jl-text-secondary: var(--jl-color-slate);
  --jl-text-on-dark: var(--jl-color-canvas);

  /* Borders & shadows */
  --jl-border-soft: rgba(17, 17, 17, 0.07);
  --jl-border-strong: rgba(17, 17, 17, 0.18);
  --jl-shadow-card: 0 1px 4px rgba(17, 17, 17, 0.06);
  --jl-shadow-accent: 0 0 0 1px rgba(200, 232, 74, 0.25), 0 6px 24px rgba(17, 17, 17, 0.06);

  /* Radius */
  --jl-radius-sm: 6px;
  --jl-radius-md: 10px;
  --jl-radius-lg: 16px;

  /* Typography */
  --jl-font-display: "Space Grotesk", sans-serif;
  --jl-font-body: "DM Sans", "Segoe UI", sans-serif;

  /* Tracking */
  --jl-tracking-tight: -0.03em;
  --jl-tracking-display: -0.04em;
  --jl-ease-standard: cubic-bezier(0.22, 1, 0.36, 1);

  /* Status */
  --jl-color-success: #2f8f57;
  --jl-color-warning: #d98e04;
  --jl-color-danger: #b44332;
}