/**
 * nord.css: color tokens in three layers (docs/decisions/0006-nord-role-tokens.md).
 *   1. Palette: the 16 official Nord colors plus a contrast ink. Only this file uses them.
 *   2. Theme:   surfaces and text, switched by <html data-theme="dark|light">.
 *   3. Roles:   the only colors renderers use; the same hues in both themes.
 * Nord palette: https://www.nordtheme.com/ (MIT License).
 */
:root {
  /* 1. Palette: Polar Night */
  --nord0: #2e3440;
  --nord1: #3b4252;
  --nord2: #434c5e;
  --nord3: #4c566a;
  /* Snow Storm */
  --nord4: #d8dee9;
  --nord5: #e5e9f0;
  --nord6: #eceff4;
  /* Frost */
  --nord7: #8fbcbb;
  --nord8: #88c0d0;
  --nord9: #81a1c1;
  --nord10: #5e81ac;
  /* Aurora */
  --nord11: #bf616a;
  --nord12: #d08770;
  --nord13: #ebcb8b;
  --nord14: #a3be8c;
  --nord15: #b48ead;
  /* Nord's darkest shade misses 4.5:1 on orange, pink and red small-text backgrounds. */
  --contrast-ink: #0b0d12;

  /* 3. Roles */
  --role-default: var(--nord3); /* idle, not yet seen, unvisited */
  --role-progress: var(--nord9); /* sorted so far, on the stack or queue */
  --role-active: var(--nord12); /* key being moved, current vertex */
  --role-compare: var(--nord13); /* being compared */
  --role-final: var(--nord14); /* in final position, done */
  --role-special: var(--nord15); /* pivot, auxiliary array, root */
  --role-reject: var(--nord11); /* rejected edge, cycle, mismatch */
  --role-path: var(--nord8); /* highlighted path or result */
  /* Text inside role fills follows the fill, independently of the page theme. */
  --on-role: var(--contrast-ink);
  --on-role-default: var(--nord6);
}

/* 2. Theme: dark (Polar Night) is the default, and the fallback before theme.js runs. */
:root,
:root[data-theme='dark'] {
  color-scheme: dark;
  --bg: var(--nord0);
  --panel: var(--nord1);
  --panel-2: var(--nord2);
  --border: var(--nord3);
  --text: var(--nord6);
  --muted: var(--nord4);
  --accent: var(--nord8);
  --accent-strong: var(--nord10);
  --on-accent: var(--nord6);
  --focus: var(--nord8);
  --code-bg: var(--nord0);
  --error: var(--nord11);
  /* Colored fills read well on Polar Night; only grey "default" bars need an edge. */
  --role-stroke: transparent;
  --default-stroke: var(--nord4);
}

:root[data-theme='light'] {
  color-scheme: light;
  --bg: var(--nord6);
  --panel: var(--nord5);
  --panel-2: var(--nord4);
  --border: var(--nord4);
  --text: var(--nord0);
  --muted: var(--nord3);
  --accent: var(--nord10);
  --accent-strong: var(--nord10);
  --on-accent: var(--nord6);
  --focus: var(--nord10);
  --code-bg: var(--nord6);
  --error: var(--nord11);
  /* Pale fills such as nord13 fall below WCAG's 3:1 non-text contrast on Snow Storm. */
  --role-stroke: var(--nord1);
  --default-stroke: var(--nord1);
}