/* Colors, radii and shadows shared by the app and the landing page. */
:root {
  color-scheme: light dark;
  --bg: #f3f3f6;
  --card: #ffffff;
  --raised: #ffffff;
  --subtle: #ececf1;
  --sheet: #f3f3f6;
  --glass: rgba(243, 243, 246, 0.82);
  --text: #0b0b0e;
  --text-2: rgba(42, 42, 48, 0.74);
  --text-3: rgba(42, 42, 48, 0.48);
  --hairline: rgba(60, 60, 67, 0.14);
  --fill: rgba(118, 118, 128, 0.11);
  --fill-strong: rgba(118, 118, 128, 0.21);
  --ink: #111114;
  --on-ink: #ffffff;
  --accent: #0066cc;
  --buy: #0b6e3b;        --buy-bg: #dff5e8;     --buy-border: rgba(11, 110, 59, 0.18);
  --pass: #b42318;       --pass-bg: #fee8e6;    --pass-border: rgba(180, 35, 24, 0.18);
  --depends: #865200;    --depends-bg: #fef0d6; --depends-border: rgba(134, 82, 0, 0.20);
  --neutral: #46464f;    --neutral-bg: #e8e8ee; --neutral-border: rgba(70, 70, 79, 0.14);
  --scrim: rgba(8, 8, 12, 0.40);
  --string: #ad9f82;
  --paper: #ffffff;
  --paper-ink: #1d1d1f;
  --paper-ink-2: rgba(29, 29, 31, 0.58);
  --great-glow: #fff1bf;
  --shadow-card: 0 1px 2px rgba(12, 12, 18, 0.04), 0 8px 24px rgba(12, 12, 18, 0.035);
  --shadow-xs: 0 1px 2px rgba(12, 12, 18, 0.04);
  --radius-xl: 26px;
  --radius-lg: 20px;
  --radius-md: 14px;
  --pad: 20px;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #000000;
    --card: #1c1c1e;
    --raised: #2c2c2e;
    --subtle: #242426;
    --sheet: #1c1c1e;
    --glass: rgba(28, 28, 30, 0.82);
    --text: #ffffff;
    --text-2: rgba(235, 235, 245, 0.70);
    --text-3: rgba(235, 235, 245, 0.44);
    --hairline: rgba(255, 255, 255, 0.10);
    --fill: rgba(118, 118, 128, 0.24);
    --fill-strong: rgba(118, 118, 128, 0.36);
    --ink: #ffffff;
    --on-ink: #000000;
    --accent: #4da3ff;
    --buy: #5ce693;      --buy-bg: #0b2617;     --buy-border: rgba(92, 230, 147, 0.24);
    --pass: #ff8b82;     --pass-bg: #30110e;    --pass-border: rgba(255, 139, 130, 0.24);
    --depends: #f7c95c;  --depends-bg: #2c1f06; --depends-border: rgba(247, 201, 92, 0.24);
    --neutral: #c8c8d0;  --neutral-bg: #232326; --neutral-border: rgba(200, 200, 208, 0.16);
    --scrim: rgba(0, 0, 0, 0.66);
    --string: #8a7f69;
    --paper: #ebe9e4;
    --great-glow: #3d3208;
    --shadow-card: none;
    --shadow-xs: none;
  }
}