:root {
  --fu-font-family: 'Roboto', sans-serif;
  --fu-font-size: 0.9rem;
  --fu-border-radius: 0;

  /* Core surfaces */
  --fu-surface: oklch(0.99 0.01 250);
  --fu-surface-muted: oklch(0.96 0.015 250);
  --fu-surface-subtle: oklch(0.94 0.01 250);

  /* Text */
  --fu-text: oklch(0.22 0.04 255);
  --fu-text-muted: oklch(0.45 0.03 255);

  /* Borders */
  --fu-border: oklch(0.88 0.015 255);

  /* Accent / primary */
  --fu-accent: oklch(0.62 0.12 255);

  /* Semantic states */
  --fu-success: oklch(0.65 0.12 145); /* green */
  --fu-warning: oklch(0.78 0.14 75); /* orange */
  --fu-danger: oklch(0.58 0.18 30); /* red */
  --fu-pending: oklch(0.72 0.04 250); /* neutral / info */
}

.dark {
  --fu-surface: oklch(0.18 0.02 255);
  --fu-text: oklch(0.92 0.02 255);
  --fu-border: oklch(0.32 0.02 255);

  --fu-skeleton-base: color-mix(
    in srgb,
    var(--fu-table-row-bg) 90%,
    var(--fu-text) 10%
  );
  --fu-skeleton-highlight: color-mix(
    in srgb,
    var(--fu-table-row-bg) 70%,
    var(--fu-text) 30%
  );
}