/* Shared identity for the Talea site. The three accent colours are the ones the paper uses
   for its mode marks: Learn green, Teach blue, Collaborate amber. */
:root {
  --ground: #fbfcfb;
  --paper: #ffffff;
  --panel: #f3f5f3;
  --hair: #d9ddd9;
  --light: #98a09a;
  --grey: #5b6360;
  --ink: #141816;

  --learn: #3d8f5f;
  --learn-soft: #e4f0e9;
  --teach: #2f6db5;
  --teach-soft: #e2ecf7;
  --collab: #c08828;
  --collab-soft: #f7eeda;
  /* accent ink for small text on white or on the soft fills */
  --learn-ink: #2b7349;
  --teach-ink: #2a63a6;
  --collab-ink: #8a5f14;

  --alert: #b5432e;
  --wash: rgba(251, 252, 251, 0.92);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground: #101413;
    --paper: #161a19;
    --panel: #1d2321;
    --hair: #2d3634;
    --light: #6b7672;
    --grey: #a3ada9;
    --ink: #eef2f0;
    --learn: #6bbd8b;
    --learn-soft: #182c21;
    --teach: #6ea8e6;
    --teach-soft: #16232f;
    --collab: #dcab55;
    --collab-soft: #2a2214;
    --learn-ink: #6bbd8b;
    --teach-ink: #6ea8e6;
    --collab-ink: #dcab55;
    --alert: #e0796a;
    --wash: rgba(16, 20, 19, 0.92);
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --ground: #101413;
  --paper: #161a19;
  --panel: #1d2321;
  --hair: #2d3634;
  --light: #6b7672;
  --grey: #a3ada9;
  --ink: #eef2f0;
  --learn: #6bbd8b;
  --learn-soft: #182c21;
  --teach: #6ea8e6;
  --teach-soft: #16232f;
  --collab: #dcab55;
  --collab-soft: #2a2214;
  --learn-ink: #6bbd8b;
  --teach-ink: #6ea8e6;
  --collab-ink: #dcab55;
  --alert: #e0796a;
  --wash: rgba(16, 20, 19, 0.92);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--ground);
  color: var(--ink);
  font-family: Inter, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
.label {
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--light);
  font-weight: 600;
}
.mark-learn { color: var(--learn); font-weight: 600; }
.mark-teach { color: var(--teach); font-weight: 600; }
.mark-collab { color: var(--collab); font-weight: 600; }