/*
 * tokens.css - One palette for every SignDrop surface.
 *
 * A white ground, monoline icons in raised chips, and exactly one solid control
 * per screen. Colour carries meaning: it marks the primary action or a selected
 * state, and is never decoration. The pastel tiles in the popup are the sole
 * exception, and they earn it by being the only thing on that screen.
 *
 * Load this after dark-theme.css and before any page stylesheet.
 */

:root {
  --sd-bg: #ffffff;
  --sd-fg: #0b0b0c;
  --sd-fg-soft: #6b6b70;
  --sd-line: #ededef;
  --sd-well: #f5f5f7;
  --sd-well-hover: #ebebee;

  --sd-chip: #ffffff;
  --sd-chip-line: #e7e7ea;

  /* The one solid control. Inverts per theme so it always reads as "the button". */
  --sd-solid: #0b0b0c;
  --sd-on-solid: #ffffff;

  --sd-accent: #2f6fed;
  --sd-danger: #b23b34;

  --sd-radius-tile: 22px;
  --sd-radius-card: 16px;
  --sd-radius-pill: 999px;

  --sd-display: 'Helvetica Neue', Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* theme-init.js writes data-theme, and passes "auto" through verbatim, so the
   media query below has to cover anything not explicitly light. */
:root[data-theme='dark'],
:root[data-theme='auto'] {
  --sd-bg: #0e0e10;
  --sd-fg: #f2f2f3;
  --sd-fg-soft: #9a9aa1;
  --sd-line: #26262a;
  --sd-well: #17171a;
  --sd-well-hover: #202024;

  --sd-chip: #1e1e22;
  --sd-chip-line: #2e2e33;

  --sd-solid: #ffffff;
  --sd-on-solid: #0b0b0c;

  --sd-accent: #7fa3e8;
  --sd-danger: #e08a83;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --sd-bg: #0e0e10;
    --sd-fg: #f2f2f3;
    --sd-fg-soft: #9a9aa1;
    --sd-line: #26262a;
    --sd-well: #17171a;
    --sd-well-hover: #202024;

    --sd-chip: #1e1e22;
    --sd-chip-line: #2e2e33;

    --sd-solid: #ffffff;
    --sd-on-solid: #0b0b0c;

    --sd-accent: #7fa3e8;
    --sd-danger: #e08a83;
  }
}