/* The AWTRIX Player's design tokens, shared by the player, the phone page and the r/place page.
   Dark first, as a device sits in a dim room; light follows the system or the visitor's choice.
   Text colors keep at least 4.5:1 on every surface they sit on; the accent fill carries dark text. */

:root {
  color-scheme: dark;
  /* Surfaces, from the page down to raised controls. */
  --bg: #0b0c0f;
  --surface-1: #121418;
  --surface-2: #181b20;
  --surface-3: #20242b;
  --overlay: rgb(5 6 8 / 72%);
  --line: #262a31;
  --line-strong: #363b45;
  /* Text. */
  --text: #eceef2;
  --text-2: #b0b6c1;
  --text-3: #8a919d;
  /* The accent: a warm orange, like the clock's LEDs at night. Fill with --on-accent text; as text
     use --accent-text. */
  --accent: #ff9a2e;
  --accent-hover: #ffad52;
  --on-accent: #1d1000;
  --accent-text: #ffb766;
  --accent-soft: rgb(255 154 46 / 14%);
  --accent-line: rgb(255 154 46 / 40%);
  /* States. */
  --ok: #43d495;
  --ok-soft: rgb(67 212 149 / 14%);
  --warn: #f5c451;
  --warn-soft: rgb(245 196 81 / 14%);
  --danger: #ff7272;
  --danger-soft: rgb(255 114 114 / 13%);
  --info: #7cbcff;
  --info-soft: rgb(124 188 255 / 14%);
  --focus: #7cbcff;
  /* The device. */
  --device: #08090b;
  --device-edge: #24272e;
  --device-text: #9aa1ad;
  /* Shape and depth. */
  --r-xs: 6px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 22px;
  --shadow-1: 0 1px 2px rgb(0 0 0 / 40%);
  --shadow-2: 0 2px 6px rgb(0 0 0 / 35%), 0 12px 32px rgb(0 0 0 / 35%);
  --shadow-3: 0 18px 60px rgb(0 0 0 / 55%);
  /* Type: 12 / 13 / 15 / 17 / 20 / 24 / 30. */
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-md: 15px;
  --fs-lg: 17px;
  --fs-xl: 20px;
  --fs-2xl: 24px;
  --fs-3xl: 30px;
  /* Space: a 4 px grid. */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;
  /* Hit targets. */
  --hit: 40px;
  /* Motion. */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --t-fast: 120ms;
  --t-med: 200ms;
  --t-slow: 320ms;
}

/* Light: chosen, or the system's when the visitor did not choose. */
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f2f3f6;
  --surface-1: #ffffff;
  --surface-2: #f6f7f9;
  --surface-3: #eceef2;
  --overlay: rgb(20 23 28 / 45%);
  --line: #e2e5ea;
  --line-strong: #cbd0d8;
  --text: #14171c;
  --text-2: #464d5a;
  --text-3: #5d6573;
  --accent: #f28a1a;
  --accent-hover: #e07a0c;
  --on-accent: #1d1000;
  --accent-text: #9c4500;
  --accent-soft: rgb(242 138 26 / 13%);
  --accent-line: rgb(200 105 10 / 45%);
  --ok: #0e6a43;
  --ok-soft: rgb(21 122 79 / 11%);
  --warn: #8a5a00;
  --warn-soft: rgb(196 140 0 / 14%);
  --danger: #c22a2a;
  --danger-soft: rgb(194 42 42 / 10%);
  --info: #1f63c4;
  --info-soft: rgb(31 99 196 / 10%);
  --focus: #1f63c4;
  --device: #1a1c21;
  --device-edge: #33363e;
  --shadow-1: 0 1px 2px rgb(16 20 28 / 8%);
  --shadow-2: 0 1px 3px rgb(16 20 28 / 8%), 0 10px 28px rgb(16 20 28 / 10%);
  --shadow-3: 0 18px 60px rgb(16 20 28 / 22%);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    color-scheme: light;
    --bg: #f2f3f6;
    --surface-1: #ffffff;
    --surface-2: #f6f7f9;
    --surface-3: #eceef2;
    --overlay: rgb(20 23 28 / 45%);
    --line: #e2e5ea;
    --line-strong: #cbd0d8;
    --text: #14171c;
    --text-2: #464d5a;
    --text-3: #5d6573;
    --accent: #f28a1a;
    --accent-hover: #e07a0c;
    --on-accent: #1d1000;
    --accent-text: #9c4500;
    --accent-soft: rgb(242 138 26 / 13%);
    --accent-line: rgb(200 105 10 / 45%);
    --ok: #0e6a43;
    --ok-soft: rgb(21 122 79 / 11%);
    --warn: #8a5a00;
    --warn-soft: rgb(196 140 0 / 14%);
    --danger: #c22a2a;
    --danger-soft: rgb(194 42 42 / 10%);
    --info: #1f63c4;
    --info-soft: rgb(31 99 196 / 10%);
    --focus: #1f63c4;
    --device: #1a1c21;
    --device-edge: #33363e;
    --shadow-1: 0 1px 2px rgb(16 20 28 / 8%);
    --shadow-2: 0 1px 3px rgb(16 20 28 / 8%), 0 10px 28px rgb(16 20 28 / 10%);
    --shadow-3: 0 18px 60px rgb(16 20 28 / 22%);
  }
}

@media (pointer: coarse) {
  :root { --hit: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  :root { --t-fast: 0ms; --t-med: 0ms; --t-slow: 0ms; }
}