/* ══════════════════════════════════════════════════════════════════════════
   Color scheme ONLY. Load this AFTER style.css
   in index.html (a second <link>) to apply this palette. To make a new
   color scheme, copy this file, rename it (theme-<name>.css), and change
   only the values below — nothing else in the site needs to know about it.
   ══════════════════════════════════════════════════════════════════════════ */
:root {
   --tone-1: #1e1819ff;
   --tone-2: #362a2cff;
   --tone-3: #503d42ff;
   --tone-4: #8ecae6ff;
   --tone-5: #ffb703ff;

   --tone-1-rgb: 30, 24, 25;
   --tone-2-rgb: 54, 42, 44;
   --tone-3-rgb: 80, 61, 66;
   --tone-4-rgb: 142, 202, 230;
   --tone-5-rgb: 255, 183, 3;

   --tone-text: #f8fafcff;
   --tone-text-rgb: 248, 250, 252;

   --code-bg: #141011ff;
   --code-bg-rgb: 20, 16, 17;

   --h1-color: #ffffffff;
   --h1-shadow: #851919ff;
   --h1-outline: #110e0bff;
}

h1 {
   color: var(--h1-color);

   text-shadow:
      -0.035em -0.035em 0 var(--h1-outline),
      0.035em -0.035em 0 var(--h1-outline),
      -0.035em 0.035em 0 var(--h1-outline),
      0.035em 0.035em 0 var(--h1-outline),
      0px -0.035em 0 var(--h1-outline),
      0px 0.035em 0 var(--h1-outline),
      -0.035em 0px 0 var(--h1-outline),
      0.035em 0px 0 var(--h1-outline),

      0px 0.04em 0 var(--h1-shadow),
      0px 0.06em 0 var(--h1-shadow),
      0px 0.08em 0 var(--h1-shadow);
}