/* The brand layer: the whole difference between the sites. A page picks its brand with
   data-brand on <html>; everything else (ink, rules, type, frame, controls) is shared.

   Each brand sets its paper (--bg, --bg-soft), its accent block (the filled button, focus ring,
   current-page mark and, where the brand says so, links), and an optional band (--band and
   --band-ink) for a hero or call-to-action strip. Light and dark follow the system setting, and
   data-theme forces one. Every accent was checked at 4.5:1 or better on its paper, and every
   band ink on its band, in both modes (DESIGN-CHANGES.md). */
@layer reset, tokens, base, components, templates, utilities, overrides;

@layer tokens {
  /* jmurphy.studio and docs.jmurphy.studio: near-white paper with a whisper of warmth, ink
     links, an oxblood accent for hover, focus and the rare filled control. No band. */
  [data-brand='studio'] {
    --bg: #fdfdfc;
    --bg-soft: #f5f5f3;
    --bg-panel: #f5f5f3;
    --accent: oklch(0.44 0.12 27);
    --accent-deep: oklch(0.38 0.11 27);
    --accent-soft: oklch(0.96 0.015 40);
    --accent-ink: #fffefb;
    --accent-edge: oklch(0.85 0.04 35);
    --link: var(--ink);
    --focus: var(--accent);
    --band: var(--ink);
    --band-ink: var(--bg);
  }

  @media (prefers-color-scheme: dark) {
    :root[data-brand='studio']:not([data-theme='light']) {
      --bg: #161513;
      --bg-soft: #1d1c19;
      --bg-panel: #1d1c19;
      --accent: oklch(0.76 0.09 40);
      --accent-deep: oklch(0.83 0.07 40);
      --accent-soft: oklch(0.27 0.03 30);
      --accent-ink: #161513;
      --accent-edge: oklch(0.42 0.06 30);
      --link: var(--ink);
      --focus: var(--accent);
      --band: var(--ink);
      --band-ink: var(--bg);
    }
  }

  [data-brand='studio'][data-theme='dark'] {
    --bg: #161513;
    --bg-soft: #1d1c19;
    --bg-panel: #1d1c19;
    --accent: oklch(0.76 0.09 40);
    --accent-deep: oklch(0.83 0.07 40);
    --accent-soft: oklch(0.27 0.03 30);
    --accent-ink: #161513;
    --accent-edge: oklch(0.42 0.06 30);
    --link: var(--ink);
    --focus: var(--accent);
    --band: var(--ink);
    --band-ink: var(--bg);
  }

  /* In light mode the Studio's derived tones (rules, the muted fill, fields and dropdowns) are
     neutral grays to match its paper; the system's own are beige, made for the warm paper the
     course sites keep. Dark mode keeps the system's. */
  @media (prefers-color-scheme: light) {
    :root[data-brand='studio']:not([data-theme='dark']) {
      --bg-muted: #ededea;
      --bg-elevated: #ffffff;
      --rule: #e4e4e1;
      --rule-soft: #eeeeec;
      --rule-strong: #c9c9c4;
    }
  }

  :root[data-brand='studio'][data-theme='light'] {
    --bg-muted: #ededea;
    --bg-elevated: #ffffff;
    --rule: #e4e4e1;
    --rule-soft: #eeeeec;
    --rule-strong: #c9c9c4;
  }

  /* Indie Scholars: indiescholars.com, its guide, the company host (shop, archive, sign-in,
     account and member pages), thanks. and the error pages. Green-white paper, forest accent and
     links, forest bands. */
  [data-brand='indie'] {
    --bg: #fafbf7;
    --bg-soft: #f4f5ef;
    --bg-panel: #f4f5ef;
    --accent: #163d2b;
    --accent-deep: #1d4d37;
    --accent-soft: #eef2ea;
    --accent-ink: #fbfaf6;
    --accent-edge: #c9d6c6;
    --link: var(--accent);
    --focus: var(--accent);
    --band: #163d2b;
    --band-ink: #fbfaf6;
  }

  @media (prefers-color-scheme: dark) {
    :root[data-brand='indie']:not([data-theme='light']) {
      --bg: #121510;
      --bg-soft: #171b15;
      --bg-panel: #171b15;
      --accent: #a9c9a1;
      --accent-deep: #c3dcbc;
      --accent-soft: #1d2a1f;
      --accent-ink: #0f1a12;
      --accent-edge: #3d5a42;
      --link: var(--accent);
      --focus: var(--accent);
      --band: #10281b;
      --band-ink: #fbfaf6;
    }
  }

  [data-brand='indie'][data-theme='dark'] {
    --bg: #121510;
    --bg-soft: #171b15;
    --bg-panel: #171b15;
    --accent: #a9c9a1;
    --accent-deep: #c3dcbc;
    --accent-soft: #1d2a1f;
    --accent-ink: #0f1a12;
    --accent-edge: #3d5a42;
    --link: var(--accent);
    --focus: var(--accent);
    --band: #10281b;
    --band-ink: #fbfaf6;
  }

  /* indiescholarbook.com: Indie Scholars' paper, the green of the book's cloth, ink links. */
  [data-brand='book'] {
    --bg: #fafbf7;
    --bg-soft: #f4f5ef;
    --bg-panel: #f4f5ef;
    --accent: #1f3b2d;
    --accent-deep: #142a1f;
    --accent-soft: #e9eeea;
    --accent-ink: #fbfaf6;
    --accent-edge: #b9c7bd;
    --link: var(--ink);
    --focus: var(--accent);
    --band: #1f3b2d;
    --band-ink: #fbfaf6;
  }

  @media (prefers-color-scheme: dark) {
    :root[data-brand='book']:not([data-theme='light']) {
      --bg: #121510;
      --bg-soft: #171b15;
      --bg-panel: #171b15;
      --accent: #a7c4b0;
      --accent-deep: #c1d8c8;
      --accent-soft: #1d2a22;
      --accent-ink: #101813;
      --accent-edge: #3e5a48;
      --link: var(--ink);
      --focus: var(--accent);
      --band: #13251c;
      --band-ink: #fbfaf6;
    }
  }

  [data-brand='book'][data-theme='dark'] {
    --bg: #121510;
    --bg-soft: #171b15;
    --bg-panel: #171b15;
    --accent: #a7c4b0;
    --accent-deep: #c1d8c8;
    --accent-soft: #1d2a22;
    --accent-ink: #101813;
    --accent-edge: #3e5a48;
    --link: var(--ink);
    --focus: var(--accent);
    --band: #13251c;
    --band-ink: #fbfaf6;
  }

  /* girardcourse.com: Studio paper, a violet accent and a solid violet band for the hero. */
  [data-brand='girard'] {
    --bg: #fcfbf8;
    --bg-soft: #f6f4ee;
    --bg-panel: #f6f4ee;
    --accent: oklch(0.42 0.14 305);
    --accent-deep: oklch(0.36 0.13 305);
    --accent-soft: oklch(0.96 0.02 305);
    --accent-ink: #fcfbf8;
    --accent-edge: oklch(0.85 0.05 305);
    --link: var(--accent);
    --focus: var(--accent);
    --band: #2d0a47;
    --band-ink: #f3ecfa;
  }

  @media (prefers-color-scheme: dark) {
    :root[data-brand='girard']:not([data-theme='light']) {
      --bg: #161513;
      --bg-soft: #1d1c19;
      --bg-panel: #1d1c19;
      --accent: oklch(0.78 0.09 305);
      --accent-deep: oklch(0.85 0.07 305);
      --accent-soft: oklch(0.27 0.04 305);
      --accent-ink: #161513;
      --accent-edge: oklch(0.42 0.06 305);
      --link: var(--accent);
      --focus: var(--accent);
      --band: #2d0a47;
      --band-ink: #f3ecfa;
    }
  }

  [data-brand='girard'][data-theme='dark'] {
    --bg: #161513;
    --bg-soft: #1d1c19;
    --bg-panel: #1d1c19;
    --accent: oklch(0.78 0.09 305);
    --accent-deep: oklch(0.85 0.07 305);
    --accent-soft: oklch(0.27 0.04 305);
    --accent-ink: #161513;
    --accent-edge: oklch(0.42 0.06 305);
    --link: var(--accent);
    --focus: var(--accent);
    --band: #2d0a47;
    --band-ink: #f3ecfa;
  }

  /* nicklandcourse.com: Studio paper, ink for accent and links, an ink band for the hero. */
  [data-brand='nickland'] {
    --bg: #fcfbf8;
    --bg-soft: #f6f4ee;
    --bg-panel: #f6f4ee;
    --accent: var(--ink);
    --accent-deep: var(--ink-soft);
    --accent-soft: var(--bg-muted);
    --accent-ink: var(--bg);
    --accent-edge: var(--rule-strong);
    --link: var(--ink);
    --focus: var(--accent);
    --band: #1b1a17;
    --band-ink: #fcfbf8;
  }

  @media (prefers-color-scheme: dark) {
    :root[data-brand='nickland']:not([data-theme='light']) {
      --bg: #161513;
      --bg-soft: #1d1c19;
      --bg-panel: #1d1c19;
      --accent: var(--ink);
      --accent-deep: var(--ink-soft);
      --accent-soft: var(--bg-muted);
      --accent-ink: var(--bg);
      --accent-edge: var(--rule-strong);
      --link: var(--ink);
      --focus: var(--accent);
      --band: #26241f;
      --band-ink: #ece8de;
    }
  }

  [data-brand='nickland'][data-theme='dark'] {
    --bg: #161513;
    --bg-soft: #1d1c19;
    --bg-panel: #1d1c19;
    --accent: var(--ink);
    --accent-deep: var(--ink-soft);
    --accent-soft: var(--bg-muted);
    --accent-ink: var(--bg);
    --accent-edge: var(--rule-strong);
    --link: var(--ink);
    --focus: var(--accent);
    --band: #26241f;
    --band-ink: #ece8de;
  }

  /* northbynorthwest.us: Studio paper, a green accent and a green band for the hero. */
  [data-brand='nbnw'] {
    --bg: #fcfbf8;
    --bg-soft: #f6f4ee;
    --bg-panel: #f6f4ee;
    --accent: #1b6900;
    --accent-deep: #145000;
    --accent-soft: oklch(0.96 0.03 140);
    --accent-ink: #ffffff;
    --accent-edge: oklch(0.85 0.06 140);
    --link: var(--accent);
    --focus: var(--accent);
    --band: #1b6900;
    --band-ink: #ffffff;
  }

  @media (prefers-color-scheme: dark) {
    :root[data-brand='nbnw']:not([data-theme='light']) {
      --bg: #161513;
      --bg-soft: #1d1c19;
      --bg-panel: #1d1c19;
      --accent: oklch(0.8 0.12 140);
      --accent-deep: oklch(0.87 0.1 140);
      --accent-soft: oklch(0.27 0.04 140);
      --accent-ink: #161513;
      --accent-edge: oklch(0.42 0.06 140);
      --link: var(--accent);
      --focus: var(--accent);
      --band: #144d00;
      --band-ink: #ffffff;
    }
  }

  [data-brand='nbnw'][data-theme='dark'] {
    --bg: #161513;
    --bg-soft: #1d1c19;
    --bg-panel: #1d1c19;
    --accent: oklch(0.8 0.12 140);
    --accent-deep: oklch(0.87 0.1 140);
    --accent-soft: oklch(0.27 0.04 140);
    --accent-ink: #161513;
    --accent-edge: oklch(0.42 0.06 140);
    --link: var(--accent);
    --focus: var(--accent);
    --band: #144d00;
    --band-ink: #ffffff;
  }
}