/* Saynso Rewards design tokens.
   Palette: Saynso blue (action), pastel blue (hero surfaces, taken from the reference set), deep navy, black, soft gray.
   Three surface levels: page (--bg), section (--surface), interactive item (--item). */
:root {
  --blue: #0b5fe3;
  --navy: #0a1428;
  --black: #05070d;

  --btn: #0b5fe3;
  --btn-hover: #0a52c6;
  --btn-press: #0943a3;

  --pastel: #a9c1ff;        /* pastel blue hero surface */
  --pastel-soft: #e4ecff;   /* selected rows, chips */
  --on-pastel: #0a1428;
  --on-pastel-muted: #3a4a78;

  --bg: #f1f4fa;
  --surface: #ffffff;
  --item: #f4f6fb;
  --surface-2: #eaeff8;
  --text: #0a1020;
  --muted: #566080;
  --border: #e1e6f1;
  --border-strong: #c7d0e3;
  --accent-text: #0b5fe3;
  --accent-soft: #e4ecff;
  --glass: rgba(255, 255, 255, .72);

  --ok: #0b7a55;   --ok-bg: #ddf3ea;
  --warn: #8a5a00; --warn-bg: #fff0d1;
  --bad: #b42334;  --bad-bg: #fde8ea;

  --on-accent: #ffffff;
  --scrim: rgba(5, 10, 24, .5);
  --blue-soft: #8db2ff;
  --warn-solid: #d99a1a;

  --shadow: 0 1px 2px rgba(10, 20, 40, .05), 0 8px 24px rgba(10, 20, 40, .06);
  --shadow-float: 0 8px 28px rgba(10, 20, 40, .14), 0 1px 0 rgba(255, 255, 255, .6) inset;

  /* Radius scale: control, item, section, pill */
  --r-xs: 6px;    /* badges, counters */
  --r-s: 10px;    /* compact controls */
  --r-m: 14px;    /* inputs, list items */
  --r-l: 22px;    /* sections, sheets, modals */
  --r-pill: 999px; /* primary buttons, nav, filter chips only */

  --font-display: 'Bricolage Grotesque', 'Instrument Sans', system-ui, sans-serif;
  --font-body: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* Spacing scale (px): 2 4 6 8 10 12 14 16 18 20 24 28 32 40 48 56 64 72. Nothing else. */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 72px; --s-9: 112px;

  --ease: cubic-bezier(.2, .7, .2, 1);
  --dur: 160ms;
  color-scheme: light;
}

:root[data-theme="dark"],
[data-theme="dark"] {
  --btn: #2a62f0;
  --btn-hover: #2356d6;
  --btn-press: #1d49b5;

  --pastel: #163272;
  --pastel-soft: #15284f;
  --on-pastel: #f2f6ff;
  --on-pastel-muted: #aebbe0;

  --bg: #060e1f;
  --surface: #0c1830;
  --item: #11203f;
  --surface-2: #142547;
  --text: #edf2ff;
  --muted: #9aa8c8;
  --border: #1b2a4a;
  --border-strong: #2b3e66;
  --accent-text: #7aa6ff;
  --accent-soft: #15284f;
  --glass: rgba(12, 24, 48, .72);

  --ok: #4fd1a0;   --ok-bg: #0e2f2a;
  --warn: #f0b955; --warn-bg: #33270d;
  --bad: #ff7a87;  --bad-bg: #3a1620;

  --shadow: 0 1px 2px rgba(0, 0, 0, .35);
  --shadow-float: 0 10px 30px rgba(0, 0, 0, .5), 0 1px 0 rgba(255, 255, 255, .06) inset;
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --btn: #2a62f0; --btn-hover: #2356d6; --btn-press: #1d49b5;
    --pastel: #163272; --pastel-soft: #15284f; --on-pastel: #f2f6ff; --on-pastel-muted: #aebbe0;
    --bg: #060e1f; --surface: #0c1830; --item: #11203f; --surface-2: #142547;
    --text: #edf2ff; --muted: #9aa8c8; --border: #1b2a4a; --border-strong: #2b3e66;
    --accent-text: #7aa6ff; --accent-soft: #15284f; --glass: rgba(12, 24, 48, .72);
    --ok: #4fd1a0; --ok-bg: #0e2f2a; --warn: #f0b955; --warn-bg: #33270d; --bad: #ff7a87; --bad-bg: #3a1620;
    --shadow: 0 1px 2px rgba(0, 0, 0, .35); --shadow-float: 0 10px 30px rgba(0, 0, 0, .5);
    color-scheme: dark;
  }
}