/* ==========================================================================
   Lens37 brand: colours, fonts and basic sizes, taken from the brand's site
   --------------------------------------------------------------------------
   Source:    https://lens37.com/ (inline :root tokens in the homepage)
   Extracted: 2026-10-14
   Dark mode: yes on the source site, so this page follows the visitor's
              light/dark setting with the site's dark values.
   Keep this file to the values below. Layout lives in fact-sheet.css.
   Each value notes the source setting it came from, so a later check can
   compare against the live site and flag changes.
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Newsreader:opsz,wght@6..72,400;6..72,500&display=swap");

:root {
  color-scheme: light dark;

  /* ---- Colours (light) ---- */
  --paper:         #f6f5fb;  /* --bg-alt */
  --sheet:         #ffffff;  /* --bg */
  --ink:           #2b2b2b;  /* --text */
  --ink-soft:      #6b6b6b;  /* --text-muted */
  --rule:          #e6e4ee;  /* --border */
  --accent:        #745ED7;  /* --lens */
  --callout:       #f6f5fb;  /* --bg-alt */
  --header-bg:     #ffffff;  /* --bg (header.top sits on the page) */
  --header-ink:    #2b2b2b;  /* --text (header.top a.talk) */
  --header-border: #e6e4ee;  /* --border */
  --footer-bg:     #ffffff;  /* --bg (footer.foot sits on the page) */
  --footer-ink:    #6b6b6b;  /* --text-muted (footer.foot) */

  /* ---- Fonts ---- */
  --font-body:     -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;  /* body */
  --font-head:     "Newsreader", Georgia, serif;  /* .serif (headings) */
  --font-label:    var(--font-body);
  --head-weight:   400;               /* .serif font-weight */
  --nav-weight:    600;               /* header.top a.talk */
  --nav-case:      none;              /* header.top a.talk */

  /* ---- Basic sizes ---- */
  --text:          1.0625rem;         /* body font-size: 17px */
  --logo-height:   1.75rem;           /* header.top img: 120px wide */
}

@media (prefers-color-scheme: dark) {
  :root {
    /* ---- Colours (dark), from :root[data-theme="dark"] ---- */
    --paper:         #13111c;  /* --bg-alt */
    --sheet:         #191724;  /* --surface */
    --ink:           #ebe9f2;  /* --text */
    --ink-soft:      #a5a1b5;  /* --text-muted */
    --rule:          #2a2738;  /* --border */
    --accent:        #8a76ec;  /* --lens */
    --callout:       #13111c;  /* --bg-alt */
    --header-bg:     #0d0c13;  /* --bg */
    --header-ink:    #ebe9f2;  /* --text */
    --header-border: #2a2738;  /* --border */
    --footer-bg:     #0d0c13;  /* --bg */
    --footer-ink:    #a5a1b5;  /* --text-muted */
  }
}