/* konjo.css: Konjo's sheet as CSS custom properties. Generated from konjo-group/brand's
   tokens.json by tools/konjo_css.py; change the tokens and run it, never this file.
   Copied from konjo-group/brand at 80dbd8f48a3b57cee8fa7271894529fd036e5d56.

   The dark sheet is the default; the light answers prefers-color-scheme where the root has no
   data-theme, and data-theme="dark" | "light" | "offensive" | "abhorrent" chooses outright.
   A step's size is calc(var(--body-size) * var(--scale-<step>)). The faces are named, never
   served: a site that wants a stand-in present brings its own font-face rules. */

:root {
  color-scheme: dark;
  --page: #0A0A0A;
  --panel: #2E2E2E;
  --ink: #F5F5F0;
  --quiet: #B9B6AD;
  --dim: #7D7B74;
  --gold: #C5A46D;
  --gold-text: #C5A46D;
  --gold-light: #D9C192;
  --amber: #E0A458;
  --red: #C24A3F;
  --red-text: #E39A90;
  --rule: rgba(197,164,109,0.30);
  --hairline: rgba(197,164,109,0.18);
  --serif: "Didot", "GFS Didot", "Bodoni MT", "Georgia", serif;
  --sans: "Avenir Next", "Avenir", "Montserrat", system-ui, sans-serif;
  --body-size: 1.0625rem;
  --scale-display: 2.6;
  --leading-display: 1.1;
  --tracking-display: 0.04em;
  --case-display: uppercase;
  --face-display: var(--serif);
  --scale-title: 1.9;
  --leading-title: 1.2;
  --tracking-title: 0.04em;
  --case-title: none;
  --face-title: var(--serif);
  --scale-heading: 1.4;
  --leading-heading: 1.25;
  --tracking-heading: 0.02em;
  --case-heading: none;
  --face-heading: var(--serif);
  --scale-body: 1;
  --leading-body: 1.6;
  --tracking-body: 0em;
  --case-body: none;
  --face-body: var(--sans);
  --scale-small: 0.88;
  --leading-small: 1.5;
  --tracking-small: 0em;
  --case-small: none;
  --face-small: var(--sans);
  --scale-label: 0.82;
  --leading-label: 1.3;
  --tracking-label: 0.12em;
  --case-label: uppercase;
  --face-label: var(--sans);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    color-scheme: light;
    --page: #F5F5F0;
    --panel: #E8E4DA;
    --ink: #1A1814;
    --quiet: #6B665C;
    --dim: #8F897C;
    --gold: #C5A46D;
    --gold-text: #8A6D2F;
    --gold-light: #6F5725;
    --amber: #9C6A16;
    --red: #A63A30;
    --red-text: #8F2E26;
    --rule: rgba(138,109,47,0.35);
    --hairline: rgba(138,109,47,0.20);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --page: #0A0A0A;
  --panel: #2E2E2E;
  --ink: #F5F5F0;
  --quiet: #B9B6AD;
  --dim: #7D7B74;
  --gold: #C5A46D;
  --gold-text: #C5A46D;
  --gold-light: #D9C192;
  --amber: #E0A458;
  --red: #C24A3F;
  --red-text: #E39A90;
  --rule: rgba(197,164,109,0.30);
  --hairline: rgba(197,164,109,0.18);
  --serif: "Didot", "GFS Didot", "Bodoni MT", "Georgia", serif;
  --sans: "Avenir Next", "Avenir", "Montserrat", system-ui, sans-serif;
}

:root[data-theme="light"] {
  color-scheme: light;
  --page: #F5F5F0;
  --panel: #E8E4DA;
  --ink: #1A1814;
  --quiet: #6B665C;
  --dim: #8F897C;
  --gold: #C5A46D;
  --gold-text: #8A6D2F;
  --gold-light: #6F5725;
  --amber: #9C6A16;
  --red: #A63A30;
  --red-text: #8F2E26;
  --rule: rgba(138,109,47,0.35);
  --hairline: rgba(138,109,47,0.20);
  --serif: "Didot", "GFS Didot", "Bodoni MT", "Georgia", serif;
  --sans: "Avenir Next", "Avenir", "Montserrat", system-ui, sans-serif;
}

:root[data-theme="offensive"] {
  --page: #FF00FF;
  --panel: #00FFFF;
  --ink: #39FF14;
  --quiet: #00FF00;
  --dim: #00CC00;
  --gold: #FF6600;
  --gold-text: #FF6600;
  --gold-light: #FF9900;
  --amber: #FFFF00;
  --red: #0000FF;
  --red-text: #0000FF;
  --rule: rgba(255,255,0,0.9);
  --hairline: rgba(255,255,0,0.5);
  --serif: "Papyrus", cursive;
  --sans: "Comic Sans MS", cursive;
}

:root[data-theme="abhorrent"] {
  --page: #6B8E23;
  --panel: #8B4513;
  --ink: #FFDB58;
  --quiet: #E6C04A;
  --dim: #BFA040;
  --gold: #FF69B4;
  --gold-text: #FF69B4;
  --gold-light: #FF1493;
  --amber: #FF4500;
  --red: #00CED1;
  --red-text: #00CED1;
  --rule: rgba(255,69,0,0.9);
  --hairline: rgba(255,69,0,0.5);
  --serif: "Impact", sans-serif;
  --sans: "Brush Script MT", cursive;
}