/* Semantic roles mapped onto the flexoki palette.

   The unconditional block below is a static light theme, used verbatim by
   browsers without light-dark(). It cannot be folded into the @supports block:
   a custom property holding an unsupported function is stored rather than
   rejected, so the light-dark() declaration would override it and then fail at
   var() substitution, falling back to inherited rather than to this value. */
:root {
  --page-bg:  var(--flexoki-paper);
  --page-fg:  var(--flexoki-black);
  --muted-fg: var(--flexoki-600);
  --rule:     var(--flexoki-150);
  --link:     var(--flexoki-blue-600);
  --code-bg:  var(--flexoki-50);

  --measure: 34rem;
  --font-serif: Charter, 'Bitstream Charter', 'Sitka Text', Cambria, serif;
  --font-sans: Seravek, 'Gill Sans Nova', Ubuntu, Calibri, 'DejaVu Sans', source-sans-pro, sans-serif;
  --font-mono: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
  /* Glyph colour of the inlined logo. The orange mark and the white counter
     inside it are fixed brand colours and stay literal in the svg. */
  --logo-fg: var(--flexoki-black);
}

@supports (color: light-dark(#000, #fff)) {
  :root {
    /* `light dark' means "ask the OS"; the attribute rules below override it. */
    color-scheme: light dark;

    --page-bg:  light-dark(var(--flexoki-paper),     var(--flexoki-black));
    --page-fg:  light-dark(var(--flexoki-black),     var(--flexoki-200));
    --muted-fg: light-dark(var(--flexoki-600),       var(--flexoki-500));
    --rule:     light-dark(var(--flexoki-150),       var(--flexoki-850));
    --link:     light-dark(var(--flexoki-blue-600),  var(--flexoki-blue-400));
    --code-bg:  light-dark(var(--flexoki-50),        var(--flexoki-950));
    --logo-fg:  light-dark(var(--flexoki-black),      var(--flexoki-paper));
  }

  :root[data-theme="light"] { color-scheme: light; }
  :root[data-theme="dark"]  { color-scheme: dark; }

  /* Inside the guard on purpose: without light-dark() the toggle would set an
     attribute nothing reads, and a control that does nothing is worse than no
     control. One gate, one coherent fallback. */
  :root.js .theme-toggle { display: inline-block; }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 0 1.5rem;
  background: var(--page-bg);
  color: var(--page-fg);
  font-family: var(--font-serif);
  font-size: 1.0625rem;
  line-height: 1.6;
}

#preamble, #content, #postamble {
  max-width: var(--measure);
  margin-inline: auto;
}

#preamble { padding: 2rem 0 0; }

#preamble nav {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.site-name, .theme-toggle {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-fg);
  text-decoration: none;
}

.site-name:hover, .theme-toggle:hover { color: var(--link); }

/* Hidden by default and revealed only inside the @supports block below, so a
   browser without light-dark() never shows a control that cannot do anything.
   display:none also keeps it out of the accessibility tree when JS is off. */
.theme-toggle {
  display: none;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

.theme-toggle [data-t] { display: none; }
:root:not([data-theme]) .theme-toggle [data-t="system"],
:root[data-theme="light"] .theme-toggle [data-t="light"],
:root[data-theme="dark"]  .theme-toggle [data-t="dark"] { display: inline; }

/* Visually hidden, still in the accessible name. */
.vh {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

#content { padding: 2.5rem 0 4rem; }

h1.title {
  font-size: 1.75rem;
  line-height: 1.2;
  margin: 0 0 2rem;
  font-weight: 400;
}

.outline-2 h2 {
  font-size: 1.1875rem;
  margin: 2.5rem 0 0.75rem;
  font-family: var(--font-sans);
}

a { color: var(--link); text-underline-offset: 0.15em; }

code, pre, .org-src-container {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.875rem;
}

pre.src {
  background: var(--code-bg);
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 0.875rem 1rem;
  overflow-x: auto;
}

#postamble {
  border-top: 1px solid var(--rule);
  padding: 1.25rem 0 3rem;
  color: var(--muted-fg);
  font-size: 0.8125rem;
}

figure { margin: 2rem 0; background: var(--page-bg); }
figure img { max-width: 100%; height: auto; }

/* Index */
/* The logo svg is inlined into the page by a #+INCLUDE in index.org, so its
   glyph fills resolve --logo-fg against the live theme.  A linked <img> or a
   background-image could not: an external svg is rendered in its own context
   and never sees this document's `data-theme'. */
#img-logo {
    margin-top: 2rem;
    width: 60%;
    max-width: 320px;
}

#img-logo svg {
    display: block;
    width: 100%;
    height: auto;
}

#outline-container-index-subtitle {
    margin-left: 10px;
}

#outline-container-index-subtitle p {
    color: var(--muted-fg);
}

#index-subtitle {
    margin: 1rem 0 1rem 0;
    font-weight: 600;
}