/* Web dashboard (Setup, Your prompts, Referrals, Payments and credits):
 * shades of purple from the Lindow Labs mark (violet #c4b5fd into indigo
 * #a5b4fc). Loaded after styles.css and design-tokens.css on those pages
 * only; the lessons and the apps keep the warm paper palette.
 * Design system: WebPalette. */
:root {
  --color-background: #faf8ff;
  --color-surface: #ffffff;
  --color-surface-alt: #f5f1ff;
  --color-card: #f5f1ff;
  --color-hover: #f5f1ff;
  --color-border: #e7e0f8;
  --color-foreground: #2a2540;
  --color-muted: #6b6485;
  --color-ink: #1a1528;
  --color-forest: #5b3fc4;
  --color-cream: #f1edfb;
  --color-parchment: #efe9fe;
  --color-accent: #c4b5fd;
  --color-accent-dim: #f1ecff;
  --color-accent-strong: #7c5cf0;
  --color-accent-press: #6741d9;
  --labs-ink: #1e1930;
  --color-selection: rgba(196, 181, 253, 0.45);
  --shadow-soft: 0 1px 2px rgba(76, 52, 160, 0.05), 0 4px 16px rgba(76, 52, 160, 0.07);
  --shadow-card: 0 1px 2px rgba(76, 52, 160, 0.05);
  --shadow-purple: 0 1px 2px rgba(124, 92, 240, 0.18), 0 6px 18px rgba(124, 92, 240, 0.24);
  --focus-ring: 0 0 0 4px rgba(124, 92, 240, 0.2);
  /* Hairlines and folder tones that were warm beige. */
  --web-rule: #e2d8fa;
  --web-rule-soft: #e2dcf2;
}

html,
body {
  background: var(--color-background);
  color: var(--color-foreground);
}

::selection {
  background: var(--color-selection);
}