/* ============================================================
   DeuelLab Notebook — design tokens
   Colour values from the UZH Corporate Design colour manual.
   https://www.cd.uzh.ch/

   Three theme states are handled deliberately:
     :root                                   -> light (also the un-stamped default)
     @media (prefers-color-scheme: dark)     -> dark, unless the user forced light
     :root[data-theme="dark"]                -> dark, forced

   Never declare a colour only inside a media or [data-theme] block.
   ============================================================ */

:root {
  /* ---- neutrals: entirely from the UZH grey ramp ---- */
  --ground:      #E7E7E7;  /* Light Grey 3 — the desk behind the page */
  --surface:     #FFFFFF;  /* UZH White — the page, panels, cards     */
  --surface-2:   #EFEFEF;  /* Light Grey 2 — inset fills, table heads */
  --surface-3:   #FAFAFA;  /* Light Grey 1 — rails, hover rows        */
  --ink:         #333333;  /* Grey 5 — body and titles, never #000    */
  --ink-2:       #4D4D4D;  /* Grey 4 — secondary prose                */
  --ink-3:       #666666;  /* Grey 3 — metadata, timestamps           */
  --rule:        #D7D7D7;  /* Light Grey 5 — borders                  */
  --rule-soft:   #E7E7E7;  /* Light Grey 3 — inner dividers           */

  /* ---- accent: UZH Blue. Interactive only. Never semantic. ---- */
  --accent:      #0028A5;  /* UZH Blue     — links, citations, focus  */
  --accent-2:    #3062FF;  /* Blue 3       — hover                    */
  --accent-dim:  #BDC9E8;  /* Blue 1       — selected fill            */
  --accent-wash: #F2F5FC;  /* derived      — selected row background  */

  /* ---- semantic states: level-5 shades, because the headline
         colours fail contrast as text. See README. ---- */
  --signed:      #536B18;  /* Apple 5  */
  --signed-dim:  #ECF6D6;  /* Apple 1  */
  --unverified:  #A27200;  /* Gold 5   */
  --unverified-dim: #FFF4DA; /* Gold 1 */
  --correction:  #7E2601;  /* Orange 5 */
  --correction-dim: #FFDBCC; /* Orange 1 */
  --retracted:   #8F0A2E;  /* Berry 4 — the manual misprints this as #08F0A2E */
  --retracted-dim: #FBC6D4; /* Berry 1 */
  --agent:       #147082;  /* Cyan 5 — machine-authored spans */
  --agent-dim:   #DBF4F9;  /* Cyan 1 */

  /* ---- elevation ---- */
  --shadow-page: 0 1px 2px rgba(0,0,0,.07), 0 6px 20px rgba(0,0,0,.07);
  --shadow-pop:  0 4px 14px rgba(0,0,0,.14), 0 1px 3px rgba(0,0,0,.10);

  /* ---- type ---- */
  --font-sans: "Fira Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace;

  --text-entry-title: 1.75rem;  /* 28px / 1.2  — once per page      */
  --text-body:        1.0625rem;/* 17px / 1.62 — entry prose        */
  --text-body-h:      1.25rem;  /* 20px / 1.3  — headings in entry  */
  --text-ui:          0.875rem; /* 14px / 1.45 — panels, forms      */
  --text-label:       0.6875rem;/* 11px / 1.3  — uppercase labels   */
  --text-data:        0.8125rem;/* 13px / 1.5  — cells, identifiers */

  --leading-body: 1.62;
  --leading-ui:   1.45;
  --measure:      68ch;

  /* The note "page" outer width — shared by app.css's .page (the entry
     itself) and, per fixes2.md round 2 ("The references and Discussion
     boxes dont have the same width than the note itself. The note width is
     correct."), by discussions.css's .thread and citations.css's
     .bibliography too. One token, not three independently-set max-widths
     that only happened to agree the day someone last hand-copied the
     number — see app.css's .page rule for how this figure itself is
     derived from templates/notes/pdf.html's page geometry. */
  --page-width: 58.3rem;

  /* ---- density ---- */
  --row-prose: 44px;
  --row-data:  32px;
  --radius:    4px;
  --radius-page: 2px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground:      #171717;
    --surface:     #242424;
    --surface-2:   #333333;  /* Grey 5 */
    --surface-3:   #1E1E1E;
    --ink:         #EFEFEF;  /* Light Grey 2 */
    --ink-2:       #C2C2C2;  /* Grey 1 */
    --ink-3:       #A3A3A3;  /* Grey 2 */
    --rule:        #4D4D4D;  /* Grey 4 */
    --rule-soft:   #3A3A3A;

    --accent:      #7596FF;  /* Blue 2 */
    --accent-2:    #7596FF;
    --accent-dim:  #001452;  /* Blue 5 */
    --accent-wash: #1A2233;

    --signed:      #A4D233;  /* UZH Apple */
    --signed-dim:  #24300B;
    --unverified:  #FFC845;  /* UZH Gold */
    --unverified-dim: #3A2A00;
    --correction:  #FE9367;  /* Orange 3 */
    --correction-dim: #3B1200;
    --retracted:   #F3537F;  /* Berry 3 */
    --retracted-dim: #3D0417;
    --agent:       #92DFEE;  /* Cyan 3 */
    --agent-dim:   #10333B;

    --shadow-page: 0 1px 2px rgba(0,0,0,.5), 0 8px 26px rgba(0,0,0,.45);
    --shadow-pop:  0 4px 16px rgba(0,0,0,.6), 0 1px 3px rgba(0,0,0,.5);
  }
}

:root[data-theme="dark"] {
  --ground:      #171717;
  --surface:     #242424;
  --surface-2:   #333333;
  --surface-3:   #1E1E1E;
  --ink:         #EFEFEF;
  --ink-2:       #C2C2C2;
  --ink-3:       #A3A3A3;
  --rule:        #4D4D4D;
  --rule-soft:   #3A3A3A;

  --accent:      #7596FF;
  --accent-2:    #7596FF;
  --accent-dim:  #001452;
  --accent-wash: #1A2233;

  --signed:      #A4D233;
  --signed-dim:  #24300B;
  --unverified:  #FFC845;
  --unverified-dim: #3A2A00;
  --correction:  #FE9367;
  --correction-dim: #3B1200;
  --retracted:   #F3537F;
  --retracted-dim: #3D0417;
  --agent:       #92DFEE;
  --agent-dim:   #10333B;

  --shadow-page: 0 1px 2px rgba(0,0,0,.5), 0 8px 26px rgba(0,0,0,.45);
  --shadow-pop:  0 4px 16px rgba(0,0,0,.6), 0 1px 3px rgba(0,0,0,.5);
}

/* ============================================================
   Base rules that are not negotiable
   ============================================================ */

body {
  background: var(--ground);          /* never transparent */
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--leading-body);
}

/* Digits must align wherever they sit in a column. */
.tabular,
table,
.data,
.version-list { font-variant-numeric: tabular-nums; }

/* Focus is always visible. Never `outline: none`. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 3px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}