/**
 * Observable HQ–inspired theme: monochrome, sharp corners, editorial feel.
 * Layout unchanged; colors and surfaces only.
 */
:root {
  /* Surfaces */
  --ramex-bg: #ffffff;
  --ramex-bg-subtle: #f6f6f6;
  --ramex-bg-muted: #ebebeb;
  --ramex-bg-page: #fafafa;

  /* Text */
  --ramex-text: #1a1a1a;
  --ramex-text-secondary: #5c5c5c;
  --ramex-text-muted: #8a8a8a;

  /* Borders & chrome */
  --ramex-border: #d4d4d4;
  --ramex-border-strong: #1a1a1a;
  --ramex-divider: #e5e5e5;

  /* Page grid (Observable-style) */
  --ramex-grid-line: rgba(0, 0, 0, 0.09);
  --ramex-grid-size: 24px;

  /* Actions (black primary, Observable uses minimal color in UI) */
  --ramex-accent: #1a1a1a;
  --ramex-accent-hover: #333333;
  --ramex-accent-muted: rgba(26, 26, 26, 0.08);

  /* Data viz accent (Observable Plot blue — charts only) */
  --ramex-chart: #4269d0;
  --ramex-chart-alt: #efb118;

  /* Semantic */
  --ramex-danger: #c41e3a;
  --ramex-success: #2d6a4f;

  /* Radius: sharp / near-square */
  --ramex-radius: 0;
  --ramex-radius-sm: 2px;

  /* Shadows: flat, border-led */
  --ramex-shadow-sm: 0 1px 0 rgba(0, 0, 0, 0.06);
  --ramex-shadow-md: 0 4px 24px rgba(0, 0, 0, 0.08);

  /* Typography */
  --ramex-font: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --ramex-font-mono: ui-monospace, 'SF Mono', 'Cascadia Code', 'Source Code Pro', Menlo, monospace;
}