/* M1 foundation. Legacy variables in styles.css remain in place. */
:root {
  /* Light reference values */
  --ui-ref-canvas: #f6f7f8;
  --ui-ref-surface: #ffffff;
  --ui-ref-surface-subtle: #f9faf9;
  --ui-ref-surface-hover: #edf0ee;
  --ui-ref-surface-active: #d6e3da;
  --ui-ref-text: #202624;
  --ui-ref-text-muted: #626d68;
  --ui-ref-border: #dfe5e2;
  --ui-ref-control-border: #7a8a81;
  --ui-ref-control-border-hover: #506b5b;
  --ui-ref-brand: #197052;
  --ui-ref-brand-hover: #145a42;
  --ui-ref-brand-active: #104b37;
  --ui-ref-on-brand: #ffffff;
  --ui-ref-danger: #b33343;
  --ui-ref-warning: #8b6115;

  /* Semantic colors */
  --ui-color-background: var(--ui-ref-canvas);
  --ui-color-surface: var(--ui-ref-surface);
  --ui-color-surface-subtle: var(--ui-ref-surface-subtle);
  --ui-color-surface-hover: var(--ui-ref-surface-hover);
  --ui-color-surface-active: var(--ui-ref-surface-active);
  --ui-color-text: var(--ui-ref-text);
  --ui-color-text-muted: var(--ui-ref-text-muted);
  --ui-color-border: var(--ui-ref-border);
  --ui-color-brand: var(--ui-ref-brand);
  --ui-color-brand-hover: var(--ui-ref-brand-hover);
  --ui-color-brand-active: var(--ui-ref-brand-active);
  --ui-color-on-brand: var(--ui-ref-on-brand);
  --ui-color-danger: var(--ui-ref-danger);
  --ui-color-warning: var(--ui-ref-warning);
  --ui-color-success: var(--ui-ref-brand);
  --ui-color-focus: var(--ui-ref-brand);
  --ui-control-border: var(--ui-ref-control-border);
  --ui-control-border-hover: var(--ui-ref-control-border-hover);

  /* Shared spacing and shape */
  --ui-space-2: 8px;
  --ui-space-4: 16px;
  --ui-space-6: 24px;
  --ui-radius-control: 7px;
  --ui-radius-surface: 12px;
  --ui-border-width: 1px;

  /* Shared control dimensions */
  --ui-control-height: 36px;
  --ui-control-padding-inline: 14px;
  --ui-control-radius: var(--ui-radius-control);
  --ui-focus-width: 2px;
  --ui-focus-offset: 2px;
}

:root[data-theme="dark"] {
  /* Dark reference values; semantic names above remain stable. */
  --ui-ref-canvas: #121715;
  --ui-ref-surface: #1b221e;
  --ui-ref-surface-subtle: #171e19;
  --ui-ref-surface-hover: #28312b;
  --ui-ref-surface-active: #375241;
  --ui-ref-text: #e5ebe7;
  --ui-ref-text-muted: #a1ada5;
  --ui-ref-border: #303b34;
  --ui-ref-control-border: #718778;
  --ui-ref-control-border-hover: #9ab7a4;
  --ui-ref-brand: #72d9a7;
  --ui-ref-brand-hover: #91e7ba;
  --ui-ref-brand-active: #b1f2d0;
  --ui-ref-on-brand: #102b1d;
  --ui-ref-danger: #ff94a1;
  --ui-ref-warning: #e8bd6a;
}