/* The paper page — the phone's design, for the browser.

   The same ramp as `Theme.ramp` for the capybara tone: warm paper under a
   white sheet, one muted violet, and a dark mode that is lamplight rather than
   black. Every web page reads its colours from here and nowhere else. */

:root {
  --bg: #FAF6F0;
  --surface: #FFFFFF;
  --surface-2: #F2ECE2;
  --text: #1E1B17;
  --muted: rgba(30, 27, 23, .64);
  --faint: rgba(30, 27, 23, .42);
  --hairline: rgba(58, 47, 32, .13);
  --shadow: 0 1px 0 rgba(58, 47, 32, .06), 0 10px 28px -14px rgba(58, 47, 32, .28);
  --accent: #5E5192;
  --accent-2: #4B4078;
  --on-accent: #FBF8F3;
  --accent-wash: #ECE8F5;
  --accent-ink: #4E4380;
  --success: #3E7B4C;
  --success-wash: #E3F0E4;
  --danger: #A8433F;
  --danger-wash: #F7E3E0;
  --warning: #99620F;
  --warning-wash: #F6ECD8;
  --radius: 18px;
  --font-display: 'Lexend', system-ui, sans-serif;
  --font-body: 'Atkinson Hyperlegible', system-ui, sans-serif;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #15130F;
    --surface: #1E1B16;
    --surface-2: #282318;
    --text: #F4EFE6;
    --muted: rgba(244, 239, 230, .66);
    --faint: rgba(244, 239, 230, .42);
    --hairline: rgba(244, 239, 230, .10);
    --shadow: 0 1px 0 rgba(0, 0, 0, .3), 0 12px 30px -16px rgba(0, 0, 0, .7);
    --accent: #B6A9E0;
    --accent-2: #C9BFEA;
    --on-accent: #14120E;
    --accent-wash: #2A2640;
    --accent-ink: #C9BFEA;
    --success: #8CC79A;
    --success-wash: #1F2D22;
    --danger: #E58B86;
    --danger-wash: #36201E;
    --warning: #E0B866;
    --warning-wash: #33291A;
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --bg: #15130F;
  --surface: #1E1B16;
  --surface-2: #282318;
  --text: #F4EFE6;
  --muted: rgba(244, 239, 230, .66);
  --faint: rgba(244, 239, 230, .42);
  --hairline: rgba(244, 239, 230, .10);
  --shadow: 0 1px 0 rgba(0, 0, 0, .3), 0 12px 30px -16px rgba(0, 0, 0, .7);
  --accent: #B6A9E0;
  --accent-2: #C9BFEA;
  --on-accent: #14120E;
  --accent-wash: #2A2640;
  --accent-ink: #C9BFEA;
  --success: #8CC79A;
  --success-wash: #1F2D22;
  --danger: #E58B86;
  --danger-wash: #36201E;
  --warning: #E0B866;
  --warning-wash: #33291A;
  color-scheme: dark;
}