/* SURFACE */

:root {
  color-scheme: light;
  --bg: #f5f6f8;
  --panel: #ffffff;
  --deep: #e9ecf0;
  --art: #07090b;
  --line: #d9dde3;
  --fg: #15181d;
  --dim: #5a6472;
  --accent: #5a4bd1;
  --on-accent: #ffffff;
  --scrim: rgba(21, 24, 29, 0.4);
  --mix: 45%;
}

/* INK */

:root {
  --blue: #5cc8ff;
  --orange: #ff8a5c;
  --gold: #ffd166;
  --green: #6ee7a8;
  --pink: #ff7ab6;
}

/* TYPE */

:root {
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --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: 17.5rem;
  --read: 72ch;
  --page: 72rem;
  --touch: 44px;
}

/* MOTION */

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

/* DARK */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0b0d10;
    --panel: #12161b;
    --deep: #07090b;
    --line: #1f262e;
    --fg: #e8ecf1;
    --dim: #7f8a97;
    --accent: #a99cff;
    --on-accent: #0b0d10;
    --scrim: rgba(0, 0, 0, 0.55);
    --mix: 100%;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0b0d10;
  --panel: #12161b;
  --deep: #07090b;
  --line: #1f262e;
  --fg: #e8ecf1;
  --dim: #7f8a97;
  --accent: #a99cff;
  --on-accent: #0b0d10;
  --scrim: rgba(0, 0, 0, 0.55);
  --mix: 100%;
}