/* THEME */

:root {
  color-scheme: light;
  --ground: var(--white);
  --bg: #f8f8f9;
  --panel: #f1f1f2;
  --deep: #e8e8e9;
  --line: #dddddf;
  --fg: var(--black);
  --dim: #555558;
  --accent: var(--blue);
  --on-accent: var(--white);
  --show-dark: none;
  --show-light: block;
}

/* SURFACE */

:root {
  --art: var(--ground);
  --scrim: color-mix(in srgb, var(--black) 40%, transparent);
  --mix: 45%;
}

/* TYPE */

:root {
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Noto Sans Symbols 2", "Noto Color Emoji";
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif, "Noto Sans Symbols 2", "Noto Color Emoji";
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace, "Noto Sans Symbols 2", "Noto Color Emoji";
  --text: 15px;
  --read-text: 17px;
}

/* SPACE */

:root {
  --s1: 0.25rem;
  --s2: 0.5rem;
  --s3: 0.75rem;
  --s4: 1rem;
  --s5: 1.5rem;
  --s6: 2rem;
  --s7: 3rem;
  --s8: 4rem;
}

/* SHAPE */

:root {
  --r1: 4px;
  --r2: 8px;
  --r3: 12px;
  --round: 999px;
  --hair: 1px solid var(--line);
  --ring: 2px solid var(--accent);
}

/* FRAME */

:root {
  --head: 3rem;
  --pane: clamp(13rem, 18vw, 17.5rem);
  --read: 72ch;
  --page: 72rem;
  --frame: calc(var(--page) + 2 * var(--pane));
  --touch: 44px;
}

/* MOTION */

:root {
  --pace: 150ms;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* FACE */

:root[data-font="sans"] { --face: "Noto Sans", var(--sans); }
:root[data-font="serif"] { --face: "Noto Serif", var(--serif); }
:root[data-font="mono"] { --face: "Noto Sans Mono", var(--mono); }
:root[data-font="mrly"] { --face: "MrlyFont", var(--mono); }

/* DARK */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --ground: var(--black);
    --bg: #070707;
    --panel: #111112;
    --deep: var(--black);
    --line: #1f1f20;
    --fg: var(--white);
    --dim: var(--gray);
    --show-dark: block;
    --show-light: none;
    --scrim: color-mix(in srgb, var(--black) 55%, transparent);
    --mix: 100%;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --ground: var(--black);
  --bg: #070707;
  --panel: #111112;
  --deep: var(--black);
  --line: #1f1f20;
  --fg: var(--white);
  --dim: var(--gray);
  --show-dark: block;
  --show-light: none;
  --scrim: color-mix(in srgb, var(--black) 55%, transparent);
  --mix: 100%;
}