@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;600;700&display=swap');

  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

  /* Defaults are Tokyo Night. js/core/themes.js overwrites every one of
     these on :root at boot, so this block only prevents a flash of
     unstyled colour before the saved colorscheme is applied. */
  :root {
    --bg-normal:  #1a1b26;
    --bg-insert:  #1a2e1a;
    --bg-visual:  #2d1b3d;
    --bg-command: #2d2218;
    --bg-replace: #2d1b1b;
    --app-bg:     #0f0f14;
    --border:     #2a2b3d;
    --border-light: #363849;
    --text:       #c0caf5;
    --text-dim:   #565f89;
    --text-bright: #e0e6ff;
    --accent:     #7aa2f7;
    --green:      #9ece6a;
    --red:        #f7768e;
    --yellow:     #e0af68;
    --orange:     #ff9e64;
    --cyan:       #7dcfff;
    --magenta:    #bb9af7;
    --sel-bg:     #33467c;
    --line-num:   #3b4261;
    --cur-line:   #1f2335;

    /* Syntax tokens — one variable per token class emitted by syntax.js */
    --tk-kw:    #bb9af7;
    --tk-str:   #9ece6a;
    --tk-num:   #ff9e64;
    --tk-com:   #565f89;
    --tk-fn:    #7aa2f7;
    --tk-type:  #2ac3de;
    --tk-op:    #89ddff;
    --tk-punc:  #9aa5ce;
    --tk-var:   #c0caf5;
    --tk-tag:   #f7768e;
    --tk-attr:  #bb9af7;
    --tk-prop:  #7dcfff;
    --tk-const: #ff9e64;
    --tk-meta:  #e0af68;
    --tk-head:  #7aa2f7;
    --tk-link:  #7dcfff;

    --font: 'JetBrains Mono', 'Cascadia Code', 'Fira Code', 'SF Mono', 'Consolas', monospace;
    --editor-font-size: 13px;
    --editor-line-height: 20px;

    --mode-bg: var(--bg-normal);
    --gutter-bg: #16161e;
    --title-bg: #16161e;
    --scrollbar-track: #16161e;
    --scrollbar-thumb: #292e42;
    --scrollbar-hover: #444b6a;
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.3);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.4);
    --shadow-lg: 0 8px 24px rgba(0,0,0,0.5);
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;
  }

  /* Text drawn on top of an --accent fill. The dark schemes use a pale
     accent, so dark text reads best; the light schemes use a mid blue,
     which needs white. One token so buttons do not have to care. */
  :root { --on-accent: var(--bg-normal); }
  :root[data-theme-kind="light"] { --on-accent: #ffffff; }

  /* Light colorschemes need a touch less contrast on the chrome. */
  :root[data-theme-kind="light"] {
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.10);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.14);
    --shadow-lg: 0 8px 24px rgba(0,0,0,0.18);
  }