/*
 * The calendar's colours (src/themes.ts lists them), shared by the screen and the colour picker.
 * data-theme on an element colours everything inside it; the screen sets it on <html>.
 *
 * The screen uses --theme-fill, -text, -soft, -mid, -strong and -outline when light, and --theme-fill and
 * --theme-on-dark when dark (data-appearance, styles.css); its App Bar stays navy (light) or is the page's
 * navy (dark). The pictures in the colour and layout choices use --theme-bar, -accent and -soft.
 *
 * "blue" is Stellar's primary colour with the dark app bar. The others are categories of Stellar's
 * extended palette (docs/foundation/primitives/color-guidelines.md), which allows white text only on the
 * 900 shade and dark text on the lighter ones.
 *
 * Events take the colour's sequential range, --palette-100 to -900 with --palette-outline for their Tags
 * (styles.css, the layout pictures in admin.css). Stellar's blue has no range of its own, so blue's events
 * take blueberry's.
 */
:root,
[data-theme="blue"] {
  /* The app bar, with white text. */
  --theme-bar: var(--rb-color-surface-dark-lighter);
  /* Edges, outlines and dots: today, events, the current page. */
  --theme-accent: var(--rb-color-primary);
  /* A stronger edge (what's next) that also takes white text. */
  --theme-strong: var(--rb-color-primary-darker);
  /* Fills with white text: badges, what's on now. */
  --theme-fill: var(--rb-color-primary);
  /* Coloured text on light surfaces. */
  --theme-text: var(--rb-color-primary-darker);
  /* Backgrounds with dark text: the event on now, quiet days in Year at a glance. */
  --theme-soft: var(--rb-color-primary-lightest);
  /* Between soft and strong (busier days in Year at a glance), with its text colour. */
  --theme-mid: var(--rb-color-primary-lighter);
  --theme-mid-text: var(--rb-color-text-light-primary);
  /* Light Tags: a 20% glass of the darker tint as their outline (Stellar colours). */
  --theme-outline: rgba(23, 90, 202, 0.2);
  /* Dark screens: coloured text and accents on navy. Stellar has no light blue, so blueberry's. */
  --theme-on-dark: var(--rb-color-extended-blueberry-300);
  /* Events: blueberry's range, the extended palette's blue. */
  --palette-900: var(--rb-color-extended-blueberry-900);
  --palette-700: var(--rb-color-extended-blueberry-700);
  --palette-500: var(--rb-color-extended-blueberry-500);
  --palette-300: var(--rb-color-extended-blueberry-300);
  --palette-100: var(--rb-color-extended-blueberry-100);
  --palette-outline: rgba(49, 84, 155, 0.2);
}

[data-theme="acai"] {
  --palette-900: var(--rb-color-extended-acai-900);
  --palette-700: var(--rb-color-extended-acai-700);
  --palette-500: var(--rb-color-extended-acai-500);
  --palette-300: var(--rb-color-extended-acai-300);
  --palette-100: var(--rb-color-extended-acai-100);
  --palette-outline: rgba(88, 68, 167, 0.2);
}
[data-theme="blueberry"] {
  --palette-900: var(--rb-color-extended-blueberry-900);
  --palette-700: var(--rb-color-extended-blueberry-700);
  --palette-500: var(--rb-color-extended-blueberry-500);
  --palette-300: var(--rb-color-extended-blueberry-300);
  --palette-100: var(--rb-color-extended-blueberry-100);
  --palette-outline: rgba(49, 84, 155, 0.2);
}
[data-theme="tonic"] {
  --palette-900: var(--rb-color-extended-tonic-900);
  --palette-700: var(--rb-color-extended-tonic-700);
  --palette-500: var(--rb-color-extended-tonic-500);
  --palette-300: var(--rb-color-extended-tonic-300);
  --palette-100: var(--rb-color-extended-tonic-100);
  --palette-outline: rgba(20, 94, 112, 0.2);
}
[data-theme="lemon"] {
  --palette-900: var(--rb-color-extended-lemon-900);
  --palette-700: var(--rb-color-extended-lemon-700);
  --palette-500: var(--rb-color-extended-lemon-500);
  --palette-300: var(--rb-color-extended-lemon-300);
  --palette-100: var(--rb-color-extended-lemon-100);
  --palette-outline: rgba(100, 85, 22, 0.2);
}
[data-theme="ginger"] {
  --palette-900: var(--rb-color-extended-ginger-900);
  --palette-700: var(--rb-color-extended-ginger-700);
  --palette-500: var(--rb-color-extended-ginger-500);
  --palette-300: var(--rb-color-extended-ginger-300);
  --palette-100: var(--rb-color-extended-ginger-100);
  --palette-outline: rgba(135, 67, 22, 0.2);
}
[data-theme="wild-berry"] {
  --palette-900: var(--rb-color-extended-wild-berry-900);
  --palette-700: var(--rb-color-extended-wild-berry-700);
  --palette-500: var(--rb-color-extended-wild-berry-500);
  --palette-300: var(--rb-color-extended-wild-berry-300);
  --palette-100: var(--rb-color-extended-wild-berry-100);
  --palette-outline: rgba(129, 55, 129, 0.2);
}

/* Every extended-palette theme uses its shades the same way. */
[data-theme="acai"],
[data-theme="blueberry"],
[data-theme="tonic"],
[data-theme="lemon"],
[data-theme="ginger"],
[data-theme="wild-berry"] {
  --theme-bar: var(--palette-900);
  --theme-accent: var(--palette-700);
  --theme-strong: var(--palette-900);
  --theme-fill: var(--palette-900);
  --theme-text: var(--palette-900);
  --theme-soft: var(--palette-100);
  --theme-mid: var(--palette-500);
  --theme-mid-text: var(--rb-color-text-dark-primary);
  --theme-outline: var(--palette-outline);
  --theme-on-dark: var(--palette-300);
}