/* theme.css — Recards design tokens */
:root {
  /* surfaces */
  --bg: #111217;
  --bar: #0d0e12;          /* navbar / bottom tab bar */
  --card: #1a1c22;
  --edge: #2a2d36;         /* card borders, dividers */
  --line: #4a4e5c;         /* secondary button border, checkbox border */
  --track: #2a2c33;        /* empty part of progress bars */
  --code-bg: #262932;

  /* text */
  --ink: #ececf2;
  --muted: #9a9db0;

  /* accent */
  --accent: #8b8ff5;
  --accent-ink: #111217;   /* text on accent buttons */
  --accent-soft: #23263a;  /* active tab pill, selected chip */
  --focus: #6f73d2;        /* textarea border / focus ring */

  /* grades / status */
  --red: #f08a7e;    --red-bg: #2a1d1c;    --red-line: #4a2c29;
  --amber: #e8b15c;  --amber-bg: #2a2417;  --amber-line: #4a3d22;
  --green: #8fd19e;  --green-bg: #1b2a20;  --green-line: #2e4a37;  --green-text: #7fd69a;
  --blue: #8ab8f0;   --blue-bg: #1c2433;   --blue-line: #2c3b55;

  /* type */
  --font: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: ui-monospace, Menlo, Consolas, monospace;

  /* radius */
  --r-sm: 8px;   /* laptop buttons, inputs */
  --r-md: 12px;  /* phone buttons, laptop cards */
  --r-lg: 16px;  /* phone cards */
  --r-pill: 999px;

  /* spacing scale: use only these */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s8: 32px;

  color-scheme: dark;
}

[data-theme="light"] {
  --bg: #f6f2ea;  --bar: #fffdf9;  --card: #fffdf9;  --edge: #e4ddd0;
  --line: #8a847b; --track: #e4ddd0; --code-bg: #ebe6dc;
  --ink: #1f1d1a; --muted: #6b655d;
  --accent: #1f6f6a; --accent-ink: #ffffff; --accent-soft: #e3efec; --focus: #1f6f6a;
  --red: #a23b32;   --red-bg: #f6e4e1;   --red-line: #e6c2bc;
  --amber: #9a5b00; --amber-bg: #f7ecd9; --amber-line: #e6d2ae;
  --green: #2f6b3a; --green-bg: #e6f2ea; --green-line: #bcdcc6; --green-text: #2f6b3a;
  --blue: #2a5d9e;  --blue-bg: #e3ecf8;  --blue-line: #bccde6;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font);
       font-size: 15px; line-height: 1.45; -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }