/* DARIKAMI's own look - the site's token file, written by hand (README "The look"). Every colour value of the site
   lives here; style.css uses only these names. make-images.py reads the first block that holds --bg (light) for og.png
   and the favicons. */

/* type, spacing, radii - the same in both themes */
:root {
  --display: "Jost", "Futura", "Century Gothic", Helvetica, Arial, sans-serif;
  --sans: "Albert Sans", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  /* 6 steps: label, small, body, lead, section head and figure, page head and numeral */
  --t-xs: 0.8125rem;
  --t-s: 0.9375rem;
  --t-m: 1.0625rem;
  --t-l: clamp(1.1875rem, 1.05rem + 0.6vw, 1.375rem);
  --t-xl: clamp(2rem, 1.3rem + 3vw, 3.5rem);
  --t-2xl: clamp(2.75rem, 1.5rem + 5.4vw, 5.5rem);
  /* spacing: 4 8 16 24 40 64 96 160 */
  --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 1rem; --s-4: 1.5rem; --s-5: 2.5rem; --s-6: 4rem; --s-7: 6rem; --s-8: 10rem;
  --screen: clamp(var(--s-7), 12vw, var(--s-8)); /* a screen's padding top and bottom */
  --cut: 0.75rem; /* the slanted corner of a button, from the slanted stroke ends of the wordmark */
  --r-card: 1.75rem; /* a soft block: a card, a frame */
  --r-small: 0.75rem; /* a small block inside a frame */
  --wrap: 80rem;
  --measure: 36rem;
}

/* colours (darikami-site.md 8.3): limestone, a darker limestone, the logo's ink. The umbrella is ink on limestone and its
   accent is the ink itself; the band is the ink itself. A line adds one colour by its class on <html>: line-websites
   Tanne (the German pages), line-data Kobalt (/en/). The 5 accent tokens and --on-band-accent (text on --band-accent:
   the Empfohlen tag, the band's filled button) are the only ones a line sets. The logo stays ink or limestone. */
:root {
  --bg: #f6f4ee; --surface: #fdfcf9; --tint: #ebe7dc; --fg: #302a28; --muted: #635b54; --line: #d6d1c5;
  --accent: #302a28; --on-accent: #f6f4ee; --accent-text: #302a28; --accent-tint: #e3dfd3;
  --band: #302a28; --on-band: #f4efe4; --band-muted: #c4bbad; --band-line: #574f4a; --band-accent: #f4efe4; --on-band-accent: #302a28;
  --device: #302a28; --device-screen: #fdfcf9; --device-line: #302a28; --ring: transparent;
  --warn: #fbeecb; --warn-line: #8a6400;
  --good: #2f6146; --bad: #9c2f2a;
  color-scheme: light;
}
:root.line-websites { --accent: #1d6457; --on-accent: #f6f4ee; --accent-text: #1d6457; --accent-tint: #dbeee6; --band-accent: #7fcdb9; --on-band-accent: #10221e; }
:root.line-data { --accent: #2956b0; --on-accent: #ffffff; --accent-text: #2956b0; --accent-tint: #dce6f8; --band-accent: #93b8f5; --on-band-accent: #10182a; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --bg: #171311; --surface: #27211e; --tint: #221c19; --fg: #efe9dd; --muted: #b5ac9e; --line: #3b3430;
  --accent: #efe9dd; --on-accent: #171311; --accent-text: #efe9dd; --accent-tint: #352d29;
  --band: #0f0c0b; --on-band: #efe9dd; --band-muted: #b5ac9e; --band-line: #3b3430; --band-accent: #efe9dd; --on-band-accent: #0f0c0b;
  --device: #0f0c0b; --device-screen: #2a2420; --device-line: #6e635b; --ring: #3b3430;
  --warn: #3d3213; --warn-line: #d9b64f;
  --good: #8fc7a4; --bad: #ec9a92;
  color-scheme: dark;
}
:root.line-websites:not([data-theme="light"]) { --accent: #7fcdb9; --on-accent: #10221e; --accent-text: #7fcdb9; --accent-tint: #15302a; --band-accent: #7fcdb9; --on-band-accent: #10221e; }
:root.line-data:not([data-theme="light"]) { --accent: #93b8f5; --on-accent: #10182a; --accent-text: #93b8f5; --accent-tint: #15223a; --band-accent: #93b8f5; --on-band-accent: #10182a; }
}
:root[data-theme="dark"] {
  --bg: #171311; --surface: #27211e; --tint: #221c19; --fg: #efe9dd; --muted: #b5ac9e; --line: #3b3430;
  --accent: #efe9dd; --on-accent: #171311; --accent-text: #efe9dd; --accent-tint: #352d29;
  --band: #0f0c0b; --on-band: #efe9dd; --band-muted: #b5ac9e; --band-line: #3b3430; --band-accent: #efe9dd; --on-band-accent: #0f0c0b;
  --device: #0f0c0b; --device-screen: #2a2420; --device-line: #6e635b; --ring: #3b3430;
  --warn: #3d3213; --warn-line: #d9b64f;
  --good: #8fc7a4; --bad: #ec9a92;
  color-scheme: dark;
}
:root[data-theme="dark"].line-websites { --accent: #7fcdb9; --on-accent: #10221e; --accent-text: #7fcdb9; --accent-tint: #15302a; --band-accent: #7fcdb9; --on-band-accent: #10221e; }
:root[data-theme="dark"].line-data { --accent: #93b8f5; --on-accent: #10182a; --accent-text: #93b8f5; --accent-tint: #15223a; --band-accent: #93b8f5; --on-band-accent: #10182a; }