html {
  --aura-font-family: "Segoe UI", Candara, "Bitstream Vera Sans", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
  --aura-base-radius: 2;

  /* Light mode (from sapl.io pages light theme) */
  --aura-background-color-light: #e2e8f0;
  --aura-accent-color-light: #028392;
  --aura-accent-text-color-light: #026d79;

  /* Dark mode */
  --aura-background-color-dark: hsl(210, 10%, 12%);
  --aura-accent-color-dark: hsl(179, 43%, 44%);
  --aura-accent-text-color-dark: rgb(64, 160, 159);

  /* Semantic colors */
  --aura-red: hsl(3, 68%, 60%);
  --aura-orange: hsl(25, 95%, 53%);
  --aura-green: hsl(145, 49%, 42%);
}

/* SAPL contrast variables using Aura light/dark convention */
html {
  color-scheme: var(--aura-color-scheme, light);
  --sapl-contrast-5pct: light-dark(rgba(0, 0, 0, 0.05), rgba(255, 255, 255, 0.05));
  --sapl-contrast-10pct: light-dark(rgba(0, 0, 0, 0.10), rgba(255, 255, 255, 0.10));
  --sapl-contrast-20pct: light-dark(rgba(0, 0, 0, 0.20), rgba(255, 255, 255, 0.20));
  --sapl-contrast-50pct: light-dark(rgba(0, 0, 0, 0.50), rgba(255, 255, 255, 0.50));
}