/*
 * RLI Online on the site bundle (code#7475): the handbook's own content classes, which webs-clients' rli bundle
 * (src/rli/scss) drew on the Bootstrap layout, and the banner the home and welcome pages open with.
 *
 * The chapter colours are set by hand, as the rli bundle sets them: the token source has none yet (dsegroup/apps-common
 * decision 17). A chapter's section element (`reading-strand`, `glossary` and the rest) sets --section-color, which
 * its headings, captions, figures, asides and table headers take. Text in a chapter colour mixes towards white in the
 * dark theme, as the bundle's content highlights do. The tinted cells keep their tints and dark text in both themes:
 * they are a figure's key, and the handbook names their colours in its text.
 *
 * The content classes sit in the bundle's content layer, with the content vocabulary, and the banner in its components
 * layer, so the bundle's utilities still win over both.
 *
 * The file is served as written, so its rules are flat: CSS nesting needs Chrome 112 and Safari 16.5, and the bundle
 * supports Chrome 111 and Safari 16.4.
 */
@layer content {
  :root {
    --rli-cover: #005c38;
    --rli-preface: #17428b;
    --rli-introduction: #008bc5;
    --rli-about-ds: #00907e;
    --rli-reading-strand: #b61f24;
    --rli-language-strand: #007147;
    --rli-records: #d94c24;
    --rli-evaluation: #0056a4;
    --rli-glossary: #006a7f;
    --rli-resource: #00773b;
    /* Text on the tinted cells, in both themes. */
    --rli-cell-text: #1c1917;
  }

  /* --- Chapters: the section element a page's content opens with ------------------------------------------------ */

  .cover {
    --section-color: var(--rli-cover);
  }

  .preface {
    --section-color: var(--rli-preface);
  }

  .introduction {
    --section-color: var(--rli-introduction);
  }

  .about-ds {
    --section-color: var(--rli-about-ds);
  }

  .reading-strand {
    --section-color: var(--rli-reading-strand);
  }

  .language-strand {
    --section-color: var(--rli-language-strand);
  }

  .records {
    --section-color: var(--rli-records);
  }

  .evaluation {
    --section-color: var(--rli-evaluation);
  }

  .glossary {
    --section-color: var(--rli-glossary);
  }

  :is(.cover, .preface, .introduction, .about-ds, .reading-strand, .language-strand, .records, .evaluation, .glossary) {
    --section-text: var(--section-color);
  }

  :is(.cover, .preface, .introduction, .about-ds, .reading-strand, .language-strand, .records, .evaluation, .glossary)
    :is(h1, h2, h3, h4, h5, h6) {
    color: var(--section-text);
  }

  /* The cells are tiles, divided by the page's background. */
  :is(.cover, .preface, .introduction, .about-ds, .reading-strand, .language-strand, .records, .evaluation, .glossary)
    .table
    :is(th, td) {
    border: 0.125rem solid var(--background);
  }

  .dark
    :is(
      .cover,
      .preface,
      .introduction,
      .about-ds,
      .reading-strand,
      .language-strand,
      .records,
      .evaluation,
      .glossary
    ) {
    --section-text: color-mix(in oklab, var(--section-color) 45%, white);
  }

  /* A figure's or table's caption, in the chapter's colour. A table's is ruled off below, and outweighs the content
     vocabulary's muted table caption. */
  .caption {
    color: var(--section-text, inherit);
    border-color: var(--section-color, var(--border));
  }

  .table > caption.caption {
    color: var(--section-text, inherit);
    border-block-end: 1px solid var(--section-color, var(--border));
  }

  /* --- Figures and asides ---------------------------------------------------------------------------------------- */

  .rli-figure {
    margin-block: 1.5rem;
    padding: 0.125rem;
    border: 0.125rem solid var(--section-color, var(--border));
  }

  .rli-figure figcaption {
    color: var(--section-text, inherit);
  }

  .rli-aside {
    margin-block-end: 1rem;
    overflow: hidden;
    font-family: var(--font-sans);
    border: 0.125rem solid var(--section-color, transparent);
    border-radius: var(--radius-lg);
  }

  .rli-aside-header {
    padding: 0.25rem;
    background-color: var(--section-color, var(--foreground));
  }

  .rli-aside-header p {
    margin: 0.25rem;
    color: white;
    font-size: var(--text-lg);
    font-weight: var(--font-weight-semibold);
  }

  .rli-aside-body {
    padding: 0.5rem;
    font-size: var(--text-sm);
  }

  /* --- Tables ---------------------------------------------------------------------------------------------------- */

  .table {
    font-weight: var(--font-weight-normal);
  }

  /* A strand's headers and its main cells, in the chapter's colour. */
  :is(.reading-strand, .language-strand, .evaluation) :is(thead th, .cell-main) {
    color: white;
    background-color: var(--section-color);
  }

  /* A chapter's row in the handbook's contents. */
  .table-bg-cover {
    --row-color: var(--rli-cover);
  }

  .table-bg-preface {
    --row-color: var(--rli-preface);
  }

  .table-bg-introduction {
    --row-color: var(--rli-introduction);
  }

  .table-bg-about-ds {
    --row-color: var(--rli-about-ds);
  }

  .table-bg-reading-strand {
    --row-color: var(--rli-reading-strand);
  }

  .table-bg-language-strand {
    --row-color: var(--rli-language-strand);
  }

  .table-bg-records {
    --row-color: var(--rli-records);
  }

  .table-bg-evaluation {
    --row-color: var(--rli-evaluation);
  }

  .table-bg-glossary {
    --row-color: var(--rli-glossary);
  }

  .tr-blue {
    --row-color: var(--rli-preface);
  }

  :is(
      .table-bg-cover,
      .table-bg-preface,
      .table-bg-introduction,
      .table-bg-about-ds,
      .table-bg-reading-strand,
      .table-bg-language-strand,
      .table-bg-records,
      .table-bg-evaluation,
      .table-bg-glossary,
      .tr-blue
    )
    > :is(th, td) {
    color: white;
    background-color: var(--row-color);
  }

  /* The tinted cells: a figure's key, the same in both themes. */
  :is(
    .cell-gray,
    .cell-t0,
    .cell-t1,
    .cell-t2,
    .cell-t3,
    .cell-reading-t0,
    .cell-reading-t1,
    .cell-reading-t2,
    .cell-language-t0,
    .cell-language-t1,
    .cell-language-t2
  ) {
    color: var(--rli-cell-text);
  }

  .cell-gray {
    background-color: #e5e5e5;
  }

  .no-fill {
    color: inherit;
    background-color: transparent;
  }

  .introduction .cell-reading-t0 {
    color: white;
    background-color: #c44e40;
  }

  .introduction .cell-reading-t1 {
    background-color: #d27c68;
  }

  .introduction .cell-reading-t2 {
    background-color: #e1a998;
  }

  .introduction .cell-language-t0 {
    color: white;
    background-color: #397a86;
  }

  .introduction .cell-language-t1 {
    background-color: #91af98;
  }

  .introduction .cell-language-t2 {
    background-color: #c0cec1;
  }

  .reading-strand .cell-t0 {
    color: white;
    background-color: #c44e40;
  }

  .reading-strand .cell-t1 {
    background-color: #d27c68;
  }

  .reading-strand .cell-t2 {
    background-color: #e1a998;
  }

  .reading-strand .cell-t3 {
    background-color: #f0d5cb;
  }

  .reading-strand .text-red {
    color: var(--section-text);
  }

  .language-strand .cell-t0 {
    color: white;
    background-color: #398662;
  }

  .language-strand .cell-t1 {
    background-color: #91af98;
  }

  .language-strand .cell-t2 {
    background-color: #c0cec1;
  }

  .language-strand .cell-t3 {
    background-color: white;
  }

  .evaluation .cell-t0 {
    color: white;
    background-color: #398662;
  }

  .evaluation .cell-t1 {
    background-color: #a5b4dd;
  }

  .evaluation .cell-t2 {
    background-color: #d3d9ef;
  }

  /* --- Text in a chapter's or a resource's colour ----------------------------------------------------------------- */

  .glossary li:target {
    color: var(--section-text);
    font-weight: var(--font-weight-semibold);
  }

  .glossary li::marker,
  .glossary .text-blue {
    color: var(--section-text);
    font-weight: var(--font-weight-semibold);
  }

  .text-phoneme {
    --text-color: var(--content-sound);
  }

  .text-word {
    --text-color: var(--content-word);
  }

  .text-resource {
    --text-color: var(--rli-resource);
  }

  :is(.text-phoneme, .text-word, .text-resource) {
    color: var(--text-color);
    font-family: var(--font-sans);
    font-weight: var(--font-weight-semibold);
  }

  .dark :is(.text-phoneme, .text-word, .text-resource) {
    color: color-mix(in oklab, var(--text-color) 45%, white);
  }
}

@layer components {
  /* The banner the home and welcome pages open with, in the language strand's green. */
  .rli-banner {
    color: color-mix(in oklab, var(--rli-language-strand) 55%, black);
    background-color: color-mix(in oklab, var(--rli-language-strand) 8%, var(--background));
  }

  .rli-banner :is(h1, h2) {
    color: inherit;
  }

  .dark .rli-banner {
    color: color-mix(in oklab, var(--rli-language-strand) 35%, white);
    background-color: color-mix(in oklab, var(--rli-language-strand) 20%, var(--background));
  }
}