/* ==========================================================================
   Ngwg Firefly theme — plain CSS port of the Firefly colour/layout system.
   Tokens follow the upstream oklch palette; one hue variable drives everything.
   ========================================================================== */

/* ---------- tokens ---------- */
:root {
  --hue: 165;

  --primary: oklch(0.70 0.14 var(--hue));
  --page-bg: oklch(0.95 0.01 var(--hue));
  --card-bg: #ffffff;
  --float-panel-bg: #ffffff;
  --card-bg-hover: oklch(0.98 0.005 var(--hue));

  --btn-content: oklch(0.55 0.12 var(--hue));
  --btn-regular-bg: oklch(0.95 0.025 var(--hue));
  --btn-regular-bg-hover: oklch(0.90 0.05 var(--hue));
  --btn-regular-bg-active: oklch(0.85 0.08 var(--hue));
  --btn-plain-bg-hover: oklch(0.95 0.025 var(--hue));
  --btn-plain-bg-active: oklch(0.98 0.01 var(--hue));
  --btn-card-bg-hover: oklch(0.98 0.005 var(--hue));
  --btn-card-bg-active: oklch(0.90 0.03 var(--hue));

  --deep-text: oklch(0.25 0.02 var(--hue));
  --title-active: oklch(0.6 0.1 var(--hue));

  --line-divider: rgb(0 0 0 / 0.08);
  --line-color: rgb(0 0 0 / 0.1);
  --meta-divider: rgb(0 0 0 / 0.2);
  --content-meta: rgb(0 0 0 / 0.6);
  --text-75: rgb(0 0 0 / 0.75);
  --text-50: rgb(0 0 0 / 0.5);
  --text-30: rgb(0 0 0 / 0.3);

  --inline-code-bg: var(--btn-regular-bg);
  --inline-code-color: var(--btn-content);
  --selection-bg: oklch(0.90 0.05 var(--hue));
  /* code blocks: Atom One Light is the default (scheme toggle off) */
  --codeblock-bg: #fafafa;
  --codeblock-fg: #383a42;
  --codeblock-scrollbar: rgb(0 0 0 / 0.45);
  --codeblock-outline: var(--page-bg);
  --codeblock-topbar-bg: oklch(0.3 0.02 var(--hue));
  --link-underline: oklch(0.93 0.04 var(--hue));
  --link-hover: oklch(0.95 0.025 var(--hue));
  --link-active: oklch(0.90 0.05 var(--hue));

  --toc-badge-bg: oklch(0.9 0.045 var(--hue));
  --toc-btn-hover: oklch(0.92 0.05 var(--hue));
  --toc-indicator-bg: oklch(0.92 0.015 var(--hue));
  --toc-item-active: oklch(0.70 0.13 var(--hue));

  /* the display-settings hue slider: a fixed rainbow, independent of --hue */
  --color-selection-bar: linear-gradient(to right,
    oklch(0.80 0.10 0), oklch(0.80 0.10 30), oklch(0.80 0.10 60),
    oklch(0.80 0.10 90), oklch(0.80 0.10 120), oklch(0.80 0.10 150),
    oklch(0.80 0.10 180), oklch(0.80 0.10 210), oklch(0.80 0.10 240),
    oklch(0.80 0.10 270), oklch(0.80 0.10 300), oklch(0.80 0.10 330),
    oklch(0.80 0.10 360));

  --radius-lg: 1rem;
  --radius-md: 0.75rem;
  --radius-sm: 0.5rem;

  --navbar-h: 4.5rem;
  --page-width: 100rem;
  /* upstream's --grid-sidebar-width (17.5rem), used at every breakpoint */
  --sidebar-w: 17.5rem;
  --banner-height-home: 65vh;
  --banner-height-non-home: max(45vh, 380px);
  --panel-overlap: 3.5rem;

  --banner-h: var(--banner-height-non-home);
  --shadow-navbar: 0 4px 16px rgb(0 0 0 / 0.1);
  --shadow-card: 0 8px 24px -16px rgb(0 0 0 / 0.35);

  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dur: 200ms;

  --z-banner: 10;
  --z-content: 30;
  --z-navbar: 80;
  --z-drawer: 90;
}

:root.dark {
  --primary: oklch(0.75 0.14 var(--hue));
  --page-bg: oklch(0.16 0.014 var(--hue));
  --card-bg: oklch(0.23 0.015 var(--hue));
  --float-panel-bg: oklch(0.19 0.015 var(--hue));
  --card-bg-hover: oklch(0.30 0.03 var(--hue));

  --btn-content: oklch(0.75 0.1 var(--hue));
  --btn-regular-bg: oklch(0.33 0.035 var(--hue));
  --btn-regular-bg-hover: oklch(0.38 0.04 var(--hue));
  --btn-regular-bg-active: oklch(0.43 0.045 var(--hue));
  --btn-plain-bg-hover: oklch(0.30 0.035 var(--hue));
  --btn-plain-bg-active: oklch(0.27 0.025 var(--hue));
  --btn-card-bg-hover: oklch(0.30 0.03 var(--hue));
  --btn-card-bg-active: oklch(0.35 0.035 var(--hue));

  --deep-text: oklch(0.95 0.01 var(--hue));
  --title-active: oklch(0.85 0.08 var(--hue));

  --line-divider: rgb(255 255 255 / 0.08);
  --line-color: rgb(255 255 255 / 0.1);
  --meta-divider: rgb(255 255 255 / 0.2);
  --content-meta: rgb(255 255 255 / 0.6);
  --text-75: rgb(255 255 255 / 0.78);
  --text-50: rgb(255 255 255 / 0.5);
  --text-30: rgb(255 255 255 / 0.3);

  --codeblock-topbar-bg: oklch(0.12 0.015 var(--hue));
  --codeblock-bg: #282c34;
  --codeblock-fg: #abb2bf;
  --codeblock-scrollbar: rgb(255 255 255 / 0.4);
  --link-underline: oklch(0.40 0.08 var(--hue));
  --link-hover: oklch(0.40 0.08 var(--hue));
  --link-active: oklch(0.35 0.07 var(--hue));

  --toc-btn-hover: oklch(0.28 0.04 var(--hue));
  --toc-indicator-bg: oklch(0.28 0.04 var(--hue));
  --toc-item-active: oklch(0.35 0.07 var(--hue));

  --color-selection-bar: linear-gradient(to right,
    oklch(0.70 0.10 0), oklch(0.70 0.10 30), oklch(0.70 0.10 60),
    oklch(0.70 0.10 90), oklch(0.70 0.10 120), oklch(0.70 0.10 150),
    oklch(0.70 0.10 180), oklch(0.70 0.10 210), oklch(0.70 0.10 240),
    oklch(0.70 0.10 270), oklch(0.70 0.10 300), oklch(0.70 0.10 330),
    oklch(0.70 0.10 360));

  --shadow-card: 0 8px 24px -16px rgb(0 0 0 / 0.8);
}

/* Code colour scheme: GitHub (toggle on). The Atom One palette is the default
   above; only the code-block surface and scrollbar change here. Token colours
   live with the rest of the code-block rules in article.css. */
:root:not(.dark)[data-code-scheme="github"] {
  --codeblock-bg: #f6f8fa;
  --codeblock-fg: #24292e;
  --codeblock-scrollbar: rgb(0 0 0 / 0.45);
}

:root.dark[data-code-scheme="github"] {
  --codeblock-bg: #0d1117;
  --codeblock-fg: #c9d1d9;
  --codeblock-scrollbar: rgb(255 255 255 / 0.4);
}