/* Theme foundation */
:root {
  /* Brand colors: do not change by theme. */
  --red: #c51f3a;
  --blue: #1f5aa6;
  --purple: #5b2a86;
  --purple-dark: #3b185f;
  --purple-soft: #7c4d9e;
  --on-red: #ffffff;
  --on-blue: #ffffff;
  --on-purple: #ffffff;

  /* Theme colors: may change by theme. */
  --ink: #181523;
  --muted: #5d5968;
  --line: #ded8e8;
  --paper: #fbfafc;
  --white: #ffffff;
  --shadow: 0 24px 70px rgba(24, 21, 35, .12);
  --rail-width: clamp(12px, 4vw, 64px);
  --page-gutter: clamp(24px, 5vw, 56px);

  --color-bg: var(--paper);
  --color-surface: var(--white);
  --color-surface-elevated: #ffffff;
  --color-surface-muted: #f6f7f9;
  --color-text: var(--ink);
  --color-muted: var(--muted);
  --color-border: var(--line);
  --color-primary: var(--purple);
  --color-primary-strong: var(--purple-dark);
  --color-primary-soft: #f1eaf6;
  --color-on-primary: #ffffff;
  --heading-color: var(--purple-dark);
  --eyebrow-color: var(--purple);
  --accent-color: var(--purple);
  --color-link: var(--purple-dark);
  --color-link-hover: var(--purple);
  --button-outline-bg: var(--color-surface);
  --button-outline-border: var(--purple-soft);
  --button-outline-text: var(--purple-dark);
  --button-outline-hover-bg: #f1eaf6;
  --button-outline-hover-border: var(--purple-dark);
  --button-outline-hover-text: var(--purple-dark);
  --button-primary-hover-bg: var(--purple-dark);
  --color-danger: var(--red);
  --color-success: #255b27;
  --color-success-bg: #edf7ed;
  --color-danger-bg: #fff0ee;
  --color-table-border: #e3e7ee;
  --color-pill-bg: #e8eef7;
  --color-pill-text: #25364f;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink: #f5f5f5;
    --muted: #d6d6d6;
    --line: #666666;
    --paper: #3c3c3c;
    --white: #ffffff;
    --shadow: 0 24px 70px rgba(0, 0, 0, .3);

    --color-bg: #3c3c3c;
    --color-surface: #464646;
    --color-surface-elevated: #505050;
    --color-surface-muted: #3c3c3c;
    --color-text: var(--ink);
    --color-muted: var(--muted);
    --color-border: var(--line);
    --color-primary: var(--purple);
    --color-primary-strong: var(--color-text);
    --color-primary-soft: #58505f;
    --color-on-primary: var(--on-purple);
    --heading-color: var(--color-text);
    --eyebrow-color: var(--purple-soft);
    --accent-color: var(--purple);
    --color-link: #f5f5f5;
    --color-link-hover: #ffffff;
    --button-outline-bg: transparent;
    --button-outline-border: #7a8494;
    --button-outline-text: #f5f5f5;
    --button-outline-hover-bg: var(--purple);
    --button-outline-hover-border: var(--purple);
    --button-outline-hover-text: var(--on-purple);
    --button-primary-hover-bg: #6b3594;
    --color-danger: #fca5a5;
    --color-success: #bbf7d0;
    --color-success-bg: #14351f;
    --color-danger-bg: #3b1518;
    --color-table-border: #374151;
    --color-pill-bg: #243653;
    --color-pill-text: #dbeafe;
    color-scheme: dark;
  }
}

html[data-theme="light"] {
  --ink: #181523;
  --muted: #5d5968;
  --line: #ded8e8;
  --paper: #fbfafc;
  --white: #ffffff;
  --shadow: 0 24px 70px rgba(24, 21, 35, .12);

  --color-bg: var(--paper);
  --color-surface: var(--white);
  --color-surface-elevated: #ffffff;
  --color-surface-muted: #f6f7f9;
  --color-text: var(--ink);
  --color-muted: var(--muted);
  --color-border: var(--line);
  --color-primary: var(--purple);
  --color-primary-strong: var(--purple-dark);
  --color-primary-soft: #f1eaf6;
  --color-on-primary: #ffffff;
  --heading-color: var(--purple-dark);
  --eyebrow-color: var(--purple);
  --accent-color: var(--purple);
  --color-link: var(--purple-dark);
  --color-link-hover: var(--purple);
  --button-outline-bg: var(--color-surface);
  --button-outline-border: var(--purple-soft);
  --button-outline-text: var(--purple-dark);
  --button-outline-hover-bg: #f1eaf6;
  --button-outline-hover-border: var(--purple-dark);
  --button-outline-hover-text: var(--purple-dark);
  --button-primary-hover-bg: var(--purple-dark);
  --color-danger: var(--red);
  --color-success: #255b27;
  --color-success-bg: #edf7ed;
  --color-danger-bg: #fff0ee;
  --color-table-border: #e3e7ee;
  --color-pill-bg: #e8eef7;
  --color-pill-text: #25364f;
  color-scheme: light;
}

html[data-theme="dark"] {
  --ink: #f5f5f5;
  --muted: #d6d6d6;
  --line: #666666;
  --paper: #3c3c3c;
  --white: #ffffff;
  --shadow: 0 24px 70px rgba(0, 0, 0, .3);

  --color-bg: #3c3c3c;
  --color-surface: #464646;
  --color-surface-elevated: #505050;
  --color-surface-muted: #3c3c3c;
  --color-text: var(--ink);
  --color-muted: var(--muted);
  --color-border: var(--line);
  --color-primary: var(--purple);
  --color-primary-strong: var(--color-text);
  --color-primary-soft: #58505f;
  --color-on-primary: var(--on-purple);
  --heading-color: var(--color-text);
  --eyebrow-color: var(--purple-soft);
  --accent-color: var(--purple);
  --color-link: #f5f5f5;
  --color-link-hover: #ffffff;
  --button-outline-bg: transparent;
  --button-outline-border: #7a8494;
  --button-outline-text: #f5f5f5;
  --button-outline-hover-bg: var(--purple);
  --button-outline-hover-border: var(--purple);
  --button-outline-hover-text: var(--on-purple);
  --button-primary-hover-bg: #6b3594;
  --color-danger: #fca5a5;
  --color-success: #bbf7d0;
  --color-success-bg: #14351f;
  --color-danger-bg: #3b1518;
  --color-table-border: #374151;
  --color-pill-bg: #243653;
  --color-pill-text: #dbeafe;
  color-scheme: dark;
}