/* ==========================================================================
   addy.zone — theme registry

   Light and dark live in style.css because they are the baseline. Everything
   here is an extra palette: alternate looks, seasonal skins, easter eggs.

   TO ADD A THEME
   --------------
   1. Copy a block below and give it a new [data-theme="name"].
   2. Redefine as many of the tokens as you care about — anything you leave
      out falls back to the light values in style.css. Always set
      `color-scheme` so scrollbars, form controls and the URL bar follow.
   3. Add the name to --themes (shown in the header toggle) or
      --themes-secret (hidden; reachable via ?theme=name, the konami code,
      or Theme.set('name') in the console).

   Themes can change more than colour — --heading-font, --body-font,
   --radius, --heading-width and the rest are all fair game.
   ========================================================================== */

@layer tokens {

  :root {
    /* Cycled by the header toggle, in order. */
    --themes: "dark, light";

    /* Unlocked, not advertised. */
    --themes-secret: "terminal, paper";
  }

  /* ---- terminal — phosphor CRT ---------------------------------------- */

  :root[data-theme="terminal"] {
    color-scheme: dark;

    --bg:            #060a06;
    --bg-subtle:     #0c140c;
    --bg-inset:      #111c11;
    --fg:            #4bf07a;
    --fg-muted:      #2fae53;
    --fg-faint:      #1d7038;
    --border:        #16301c;
    --border-strong: #23522e;
    --link:          #9dffb9;
    --link-underline:#2fae53;
    --accent:        #4bf07a;
    --accent-fg:     #060a06;
    --mark:          #1d7038;
    --focus:         #9dffb9;
    --selection-bg:  #1d7038;
    --selection-fg:  #d7ffe4;

    /* Monospace everything. */
    --body-font: var(--font-mono);
    --heading-font: var(--font-mono);
    --heading-weight: 700;
    --heading-tracking: 0.02em;
    --radius: 0px;
  }

  /* ---- paper — warm print --------------------------------------------- */

  :root[data-theme="paper"] {
    color-scheme: light;

    --bg:            #f6f1e6;
    --bg-subtle:     #efe8d9;
    --bg-inset:      #e6ddca;
    --fg:            #2c2620;
    --fg-muted:      #5f5648;
    --fg-faint:      #8b8073;
    --border:        #ddd3bf;
    --border-strong: #c4b79d;
    --link:          #6b3f16;
    --link-underline:#c4b79d;
    --accent:        #8a4b1c;
    --accent-fg:     #f6f1e6;
    --mark:          #f0dda0;
    --focus:         #8a4b1c;
    --selection-bg:  #e8d9b4;
    --selection-fg:  #2c2620;

    --heading-width: 92%;
    --heading-weight: 600;
    --leading: 1.72;
  }
}