/*
 * Maps Scalar's --scalar-* variables onto the shared Doquill design tokens
 * defined in theme.css. Core scope: colours + radius. Typography is left at
 * Scalar's default.
 *
 * The referenced tokens (--background, --primary, …) flip between light and
 * dark automatically because theme.css defines dark values under `.dark`,
 * which index.html toggles on <html> from the system colour scheme. Defining
 * the mapping once here is therefore enough for both palettes.
 */

:root,
.scalar-app {
  /* Surfaces */
  --scalar-background-1: var(--background);
  --scalar-background-2: var(--muted);
  --scalar-background-3: var(--accent);
  --scalar-background-accent: var(--accent);

  /* Text */
  --scalar-color-1: var(--foreground);
  --scalar-color-2: var(--muted-foreground);
  --scalar-color-3: var(--muted-foreground);
  --scalar-color-accent: var(--primary);

  /* Borders */
  --scalar-border-color: var(--border);

  /* Links */
  --scalar-link-color: var(--primary);
  --scalar-link-color-hover: var(--primary);

  /* Primary button */
  --scalar-button-1: var(--primary);
  --scalar-button-1-color: var(--primary-foreground);
  --scalar-button-1-hover: var(--primary);

  /* Radius (theme.css only exposes --radius as a plain custom property) */
  --scalar-radius: var(--radius);
  --scalar-radius-lg: var(--radius);
  --scalar-radius-xl: calc(var(--radius) + 4px);

  /* Sidebar */
  --scalar-sidebar-background-1: var(--sidebar);
  --scalar-sidebar-color-1: var(--sidebar-foreground);
  --scalar-sidebar-color-2: var(--muted-foreground);
  --scalar-sidebar-border-color: var(--sidebar-border);
  --scalar-sidebar-item-hover-background: var(--sidebar-accent);
  --scalar-sidebar-item-hover-color: var(--sidebar-accent-foreground);
  --scalar-sidebar-item-active-background: var(--sidebar-accent);
  --scalar-sidebar-color-active: var(--sidebar-accent-foreground);
}