/* ── dracula · Castle Blocks (0.5.36, draft aivi.at/draft/dracula/b.html) ──
   Brick's block language (its rules match both skins, see brick.css), built
   for a dark room instead of recoloured paper:
     - the board is Background Light, so near-black (Darker) block shadows
       read; slate shadows on a near-black board looked washed out;
     - card and dialog heads are dark stone with a brick stamp in the card's
       Dracula colour (a login's tag colour wins), not a purple flood;
     - purple means "you are here": Add Brik, the selected category, focus.
   Palette: draculatheme.com/spec — Dracula Classic dark, Alucard Classic
   light. Spec values as-is except where small text would fail WCAG AA:
     Comment #6272A4 is 3.03:1 on Background → dim text #AFB6CB (same hue,
       7.04:1 on cards, 5.6:1 on the board); Comment stays for markers.
     Red #FF5555 is 4.53:1 → text uses AnsiBrightRed #FF6E6E (5.23:1).
     Alucard Comment #6C664B is 4.3:1 on the light board → #615B43 (5.1:1).
   Cream #FFFBEB on Alucard Purple #644AC9 is 6.02:1 (dark ink would be
   2.64:1), so light-tone ink on purple is cream. */

/* ── dracula · light — Alucard ── */
[data-skin="dracula"] {
  --bg: #dedccf;            /* Alucard Background Light — the board */
  --surface: #fffbeb;       /* Alucard Background — cards */
  --surface-2: #ece9df;     /* Alucard Background Lighter — stone heads, footers */
  --text: #1f1f1f;          /* Alucard Foreground — 15.89:1 */
  --text-dim: #615b43;      /* Alucard Comment, darkened for the board */
  --border: #ceccc0;        /* Alucard Background Dark — inner rules */
  --frame-border: #1f1f1f;
  --shadow-ink: #1f1f1f;
  --accent: #644ac9;        /* Alucard Purple */
  --on-accent: #fffbeb;
  --danger: #cb3a2a;        /* Alucard Red — 4.85:1 */
  --danger-light: #cb3a2a;
  --danger-dark: #ff6e6e;
  --radius: 2px;
  --rail: #ece9df; --rail-ink: #1f1f1f; --purple: #644ac9; --purple-ink: #fffbeb;
  --pink: #a3144d; --green: #14710a; --cyan: #036a96; --orange: #a34d14;
  --yellow: #846e15; --red: #cb3a2a;
}

/* ── dracula · dark — Dracula Classic ── */
[data-skin="dracula"][data-theme="dark"] {
  color-scheme: dark;
  --bg: #343746;            /* Background Light — the board */
  --surface: #282a36;       /* Background — cards */
  --surface-2: #21222c;     /* Background Dark — stone heads, footers */
  --text: #f8f8f2;          /* Foreground — 13.36:1 */
  --text-dim: #afb6cb;      /* Comment, lightened for text */
  --border: #44475a;        /* Selection — inner rules */
  --frame-border: #191a21;  /* Background Darker — edges and shadows */
  --shadow-ink: #191a21;
  --accent: #bd93f9;        /* Purple */
  --on-accent: #282a36;     /* Background on Purple — 5.90:1 */
  --danger: #ff6e6e;        /* AnsiBrightRed */
  --rail: #21222c; --rail-ink: #f8f8f2; --purple: #bd93f9; --purple-ink: #282a36;
  --pink: #ff79c6; --green: #50fa7b; --cyan: #8be9fd; --orange: #ffb86c;
  --yellow: #f1fa8c; --red: #ff6e6e;
}

/* Card bodies with their own light/dark choice use the same two palettes. */
[data-skin="dracula"] :is(.card-note, .card-table, .card-checklist, .card-snippet,
  .card-embed, .card-credential, .card-music, .card-media, .card-terminal,
  .card-rss, .card-server) {
  --bg: #282a36; --surface: #282a36; --surface-2: #21222c;
  --text: #f8f8f2; --text-dim: #afb6cb; --border: #44475a;
  --pink: #ff79c6; --green: #50fa7b; --cyan: #8be9fd; --orange: #ffb86c;
  --yellow: #f1fa8c; --red: #ff6e6e; --purple: #bd93f9;
}
[data-skin="dracula"] :is(.card-note-light, .card-table-light, .card-snippet-light,
  .card-checklist-light, .card-embed-light, .card-credential-light,
  .card-music-light, .card-media-light, .card-terminal-light, .card-rss-light,
  .card-calendar-light, .card-server-light) {
  --bg: #ece9df; --surface: #fffbeb; --surface-2: #ece9df;
  --text: #1f1f1f; --text-dim: #6c664b; --border: #ceccc0;
  --pink: #a3144d; --green: #14710a; --cyan: #036a96; --orange: #a34d14;
  --yellow: #846e15; --red: #cb3a2a; --purple: #644ac9;
}

/* Each card type has its colour; it only ever shows as the head's stamp. */
[data-skin="dracula"] .card { --hue: var(--purple); }
[data-skin="dracula"] :is(.card-note, .card-music) { --hue: var(--pink); }
[data-skin="dracula"] :is(.card-checklist, .card-terminal) { --hue: var(--green); }
[data-skin="dracula"] :is(.card-table, .card-media) { --hue: var(--orange); }
[data-skin="dracula"] :is(.card-server, .card-embed) { --hue: var(--cyan); }
[data-skin="dracula"] :is(.card-snippet, .card-files) { --hue: var(--yellow); }
[data-skin="dracula"] .card-credential { --hue: var(--red); }

/* Stone heads with a brick stamp. Brick paints the head with --tag/--accent
   and inks it with --on-accent (chrome.js tints that per tag); here the head
   is stone, so its ink is plain text and the tag colour goes to the stamp. */
[data-skin="dracula"] .card-head {
  background: var(--surface-2); color: var(--text);
  border-bottom: 2px solid var(--frame-border); padding-left: 0;
}
[data-skin="dracula"] .card-head::before {
  content: ''; flex: none; align-self: stretch; width: 12px;
  background: var(--tag, var(--hue)); border-right: 2px solid var(--frame-border);
}
[data-skin="dracula"] .card-head .card-title { color: var(--text); font-weight: 700; }
[data-skin="dracula"] .card-head .card-dot:not(.is-live):not(.is-warn) { background: var(--text-dim); opacity: 1; }
[data-skin="dracula"] .card-dot.is-live { background: var(--green); }

/* Dialogs and Settings are blocks of the same kind: stone head, purple stamp. */
[data-skin="dracula"] :is(.modal-head, .settings-head) { background: var(--surface-2); color: var(--text); padding-left: 0; }
[data-skin="dracula"] :is(.modal-head, .settings-head)::before {
  content: ''; flex: none; align-self: stretch; width: 12px; margin: -6px 8px -6px 0;
  background: var(--purple); border-right: 2px solid var(--frame-border);
}
[data-skin="dracula"] .settings-head::before { margin: -8px 4px -8px 0; }
[data-skin="dracula"] .modal-head button,
[data-skin="dracula"] .settings-head .settings-email { color: var(--text); }

/* Cream ink on the light tone's purple: the black logo turns cream with it. */
[data-skin="dracula"]:not([data-theme="dark"]) .auth-head img { filter: brightness(0) invert(1); }

/* The rail is a stone block (user, 2026-10-10: purple was "a bit very
   colourful"). Brick's rail rules paint it with --accent and ink it with
   --on-accent, so inside #sidebar those two become the rail and its ink;
   the real purple marks Add Brik and the selected category. */
[data-skin="dracula"] #sidebar { --accent: var(--rail); --on-accent: var(--rail-ink); }
[data-skin="dracula"] #sidebar #newEntryBtn { background: var(--purple); color: var(--purple-ink); }
[data-skin="dracula"] #sidebar .nb-plus { background: var(--purple-ink); color: var(--purple); }
[data-skin="dracula"] #sidebar .nav-item.active { background: var(--purple); color: var(--purple-ink); }
[data-skin="dracula"] #sidebar .nav-item.active .nav-slot::before { background: var(--purple-ink); }
[data-skin="dracula"] #sidebar .nav-item.active .nav-caret { color: var(--purple-ink); }
[data-skin="dracula"] #sidebar .nav-item.active-branch[data-depth]:not([data-depth="0"])::before,
[data-skin="dracula"] #sidebar .nav-item.active-branch[data-depth]:not([data-depth="0"])::after { background: var(--purple); }
[data-skin="dracula"] #sidebar .user-avatar { background: var(--pink); color: var(--purple-ink); }
[data-skin="dracula"] #sidebar .sb-brand img { filter: brightness(0); }
[data-skin="dracula"][data-theme="dark"] #sidebar .sb-brand img { filter: brightness(0) invert(1); }

/* Purple-tinted selection and caret. */
[data-skin="dracula"] ::selection { background: color-mix(in srgb, var(--accent) 38%, transparent); color: var(--text); }
[data-skin="dracula"] :is(input, textarea) { caret-color: var(--accent); accent-color: var(--accent); }