/* Dark mode for the website (components/sb-theme.js adds class "sb-dark" to <html>).
   Mostly done by giving the colour tokens (tokens/colors.css, sb-colors.css) dark values:
   --white is the card / surface colour, the greys flip, light tints become deep tints.
   --on-dark stays white: text that sits on navy / red / coloured backgrounds. */

/* Header ☀ / ☾ button (both headers) */
.sb-theme-btn{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;flex:none;border-radius:50%;border:1.5px solid var(--border-default,#e3e6ef);background:transparent;color:var(--text-body,#3a4256);cursor:pointer;padding:0;transition:background .15s,border-color .15s,color .15s}
.sb-theme-btn:hover{background:var(--gray-100,#eef0f6);border-color:var(--border-strong,#c9cee0);color:var(--text-heading,#131c66)}
.sb-theme-btn:focus-visible{outline:3px solid var(--border-focus,#2f6fed);outline-offset:2px}

html.sb-dark{
  color-scheme:dark;
  --white:#161d33;           /* cards, panels, inputs */
  --gray-50:#0d1222;         /* page background */
  --gray-100:#1c2440;        /* muted panels, hover */
  --gray-200:#2a3456;        /* borders */
  --gray-300:#3b4772;
  --gray-400:#56628c;
  --gray-500:#9ba5c2;        /* muted text */
  --gray-700:#d4daea;        /* body text */
  --gray-900:#f2f4fa;

  /* The brand blue is both a fill (white text on it) and a text colour (outline buttons, badges):
     #5570ff gives ~4:1 both ways on the dark cards. */
  --brand-primary:#5570ff;
  --navy-700:#5570ff;
  --navy-600:#6f86ff;
  --navy-100:#1a2350;  --navy-50:#161e45;  --lavender-100:#1e2752;  --blue-100:#17305c;
  --magenta-100:#3d1a24; --red-100:#3d1b22; --red-50:#3a1a20;
  --teal-100:#123c39;  --teal-50:#10332f;

  --red-700:#ff8a80;   /* danger text on dark */
  --teal-700:#129b8c;  /* success: text on dark and fill under white text (both ~4:1) */

  --color-bg-page:#0d1222;
  --color-bg-surface:var(--white);
  --color-bg-muted:var(--gray-100);
  --text-heading:#eef1ff;
  --text-body:var(--gray-700);
  --text-muted:var(--gray-500);
  --text-link:#a9b6ff;
  --text-link-hover:#c9d2ff;
  --text-on-brand:#ffffff;
  --text-on-inverse:#e3e7f5;
  --text-success:#5fd3c4;
  --text-danger:#ff8a80;
  --text-accent:#ff7b78;
  --border-default:var(--gray-200);
  --border-strong:var(--gray-300);
  --border-brand:#5570ff;

  --shadow-sm:0 1px 2px rgba(0,0,0,.45);
  --shadow-md:0 6px 18px rgba(0,0,0,.45);
  --shadow-lg:0 14px 40px rgba(0,0,0,.55);
}
html.sb-dark body{background:var(--gray-50);color:var(--text-body)}

/* The two-colour logo (navy + red on transparent): keep it readable on dark. */
html.sb-dark img[src*="assets/logo"]{filter:invert(1) hue-rotate(180deg) brightness(1.15)}

/* Form fields and native controls */
html.sb-dark input:not([type=checkbox]):not([type=radio]):not([type=range]),
html.sb-dark select,html.sb-dark textarea{background-color:var(--white);color:var(--text-body);border-color:var(--border-default)}
html.sb-dark input::placeholder,html.sb-dark textarea::placeholder{color:#7d87a6}
html.sb-dark input[readonly]{background-color:var(--gray-100)}

/* Text set in navy that would vanish on a dark background */
html.sb-dark h1,html.sb-dark h2,html.sb-dark h3,html.sb-dark h4{color:var(--text-heading)}
html.sb-dark hr{border-color:var(--border-default)}

/* Grammar Rule Book (components/grammar/grammar-book.css keeps its own colour set on .gbook) */
html.sb-dark .gbook{--ink:#eef1ff;--ink-soft:#c9d0e2;--muted:#9ba5c2;--line:#2a3456;--navy:#5570ff;--navy-soft:#1a2350;
  --gold:#ff8a80;--gold-soft:#3d1a24;--green:#6fd3a0;--green-soft:#112b20;--red:#ff8f87;--red-soft:#3a1a20;--violet:#b9c6ff;--violet-soft:#1e2752}
html.sb-dark .gbook .ex .bad{color:#ffb3ad}
html.sb-dark .gbook .ex .good{color:#8fe3b8}
html.sb-dark .gbook .mnum{color:#ff8a80}
html.sb-dark .gbook tr:nth-child(even) td{background:#131a2e}
html.sb-dark .gbook td.k{color:#a9b6ff}
html.sb-dark{--accent-strong:#ff8a80}