@layer tokens, base, components, shell, pages;

@layer tokens {
  :root, ::backdrop {
    color-scheme: dark;
    --ground: #0b0c11;
    --side: #0e1016;
    --panel: #12141b;
    --raised: #181b23;
    --float: #181b23;
    --hover: #1a1d26;
    --well: #0b0c11;
    --track: #0b0c11;
    --bar: rgba(14, 16, 22, 0.96);
    --wash: rgba(255, 255, 255, 0.015);
    --wash-2: rgba(255, 255, 255, 0.025);
    --fill: rgba(255, 255, 255, 0.05);
    --fill-2: rgba(255, 255, 255, 0.07);
    --ghost: rgba(255, 255, 255, 0.12);
    --img-a: #1c2030;
    --img-b: #141722;
    --line: rgba(255, 255, 255, 0.08);
    --line-2: rgba(255, 255, 255, 0.15);
    --line-3: rgba(255, 255, 255, 0.28);
    --dash: rgba(255, 255, 255, 0.2);
    --tear: rgba(255, 255, 255, 0.13);
    --strong: #ffffff;
    --ink: #f4f6fb;
    --dim: #c3c8d4;
    --muted: #8c93a2;
    --placeholder: #5f6676;
    /* --accent-ink is the text on an accent or bad fill */
    --accent: #8bcbf4;
    --accent-hi: #a9d9f8;
    --accent-ink: #0f172a;
    --accent-soft: rgba(139, 203, 244, 0.12);
    --accent-line: rgba(139, 203, 244, 0.35);
    --discord: #5865f2;
    --good: #7fd48f;
    --good-soft: rgba(127, 212, 143, 0.12);
    --good-line: rgba(127, 212, 143, 0.4);
    --bad: #f2777a;
    --bad-hi: #f59597;
    --bad-soft: rgba(242, 119, 122, 0.12);
    --bad-line: rgba(242, 119, 122, 0.4);
    --bad-wash: rgba(242, 119, 122, 0.05);
    --warn: #f0b44c;
    --warn-soft: rgba(240, 180, 76, 0.12);
    --warn-line: rgba(240, 180, 76, 0.3);
    --warn-wash: rgba(240, 180, 76, 0.04);
    /* Series colours are data. Fills use them as they are with --on-series text; dots, bars
       and kickers redraw them at --series-l, where "l" keeps them as they are. */
    --c-ss: #8bcbf4;
    --c-tr: #8f88f5;
    --c-uoft: #7fd48f;
    --c-uts: #f0883e;
    --on-series: #0f172a;
    --series-l: l;
    --thumb: rgba(255, 255, 255, 0.16);
    --thumb-hi: rgba(255, 255, 255, 0.3);
    --thumb-on: rgba(139, 203, 244, 0.75);
    --scrim: rgba(4, 5, 8, 0.62);
    --scrim-blur: rgba(4, 5, 8, 0.5);
    --on-photo: rgba(10, 11, 16, 0.72);
    --on-photo-ink: #ffffff;
    --sh-pop: 0 18px 44px rgba(0, 0, 0, 0.55);
    --sh-modal: 0 30px 80px rgba(0, 0, 0, 0.6);
    --sh-sheet: 0 -24px 48px rgba(0, 0, 0, 0.5);
    --r: 6px;
    --r-sm: 4px;
    --r-xs: 3px;
    --r-sheet: 10px;
    --r-pill: 999px;
    --z-sticky: 4;
    --z-bar: 5;
    --z-pop: 20;
    --z-scrim: 30;
    --z-sheet: 31;
    --z-toast: 50;
    --f-d: "Auro", "Arial Black", sans-serif;
    --f-ui: "Areal", "Segoe UI", system-ui, sans-serif;
    --f-m: "Areal Mono", ui-monospace, "SF Mono", Consolas, monospace;
  }

  [data-theme="light"], [data-theme="light"] ::backdrop {
    color-scheme: light;
    --ground: #f3f4f7;
    --side: #ffffff;
    --panel: #ffffff;
    --raised: #eef0f4;
    --float: #ffffff;
    --hover: #f1f3f6;
    --well: #ffffff;
    --track: #e8ebf0;
    --bar: rgba(255, 255, 255, 0.94);
    --wash: rgba(15, 23, 42, 0.02);
    --wash-2: rgba(15, 23, 42, 0.035);
    --fill: rgba(15, 23, 42, 0.045);
    --fill-2: rgba(15, 23, 42, 0.06);
    --ghost: rgba(15, 23, 42, 0.1);
    --img-a: #e6e9ef;
    --img-b: #d5dae3;
    --line: rgba(15, 23, 42, 0.09);
    --line-2: rgba(15, 23, 42, 0.16);
    --line-3: rgba(15, 23, 42, 0.28);
    --dash: rgba(15, 23, 42, 0.24);
    --tear: rgba(15, 23, 42, 0.18);
    --strong: #0b1220;
    --ink: #1d2433;
    --dim: #3c4657;
    --muted: #5f6878;
    --placeholder: #8b93a1;
    --accent: #1a6aa3;
    --accent-hi: #155a8c;
    --accent-ink: #ffffff;
    --accent-soft: rgba(26, 106, 163, 0.1);
    --accent-line: rgba(26, 106, 163, 0.35);
    --good: #1d7a3c;
    --good-soft: rgba(29, 122, 60, 0.1);
    --good-line: rgba(29, 122, 60, 0.35);
    --bad: #b42318;
    --bad-hi: #912018;
    --bad-soft: rgba(180, 35, 24, 0.08);
    --bad-line: rgba(180, 35, 24, 0.35);
    --bad-wash: rgba(180, 35, 24, 0.04);
    --warn: #8a5a00;
    --warn-soft: rgba(138, 90, 0, 0.1);
    --warn-line: rgba(138, 90, 0, 0.32);
    --warn-wash: rgba(138, 90, 0, 0.05);
    --on-series: #0f172a;
    --series-l: 0.52;
    --thumb: rgba(15, 23, 42, 0.2);
    --thumb-hi: rgba(15, 23, 42, 0.36);
    --thumb-on: rgba(26, 106, 163, 0.8);
    --scrim: rgba(15, 23, 42, 0.36);
    --scrim-blur: rgba(15, 23, 42, 0.24);
    --on-photo: rgba(10, 11, 16, 0.72);
    --on-photo-ink: #ffffff;
    --sh-pop: 0 12px 32px rgba(15, 23, 42, 0.14), 0 1px 3px rgba(15, 23, 42, 0.08);
    --sh-modal: 0 24px 64px rgba(15, 23, 42, 0.22);
    --sh-sheet: 0 -12px 36px rgba(15, 23, 42, 0.16);
  }
}