*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

  :root {
    --bg: #f5f5f0;
    --surface: #ffffff;
    --surface2: #f9f9f6;
    --border: #e0dfd8;
    --border-strong: #c8c7bf;
    --text: #1a1a18;
    --text-sec: #5a5a55;
    --text-muted: #9a9a94;
    --accent: #185fa5;
    --accent-bg: #e6f1fb;
    --accent-text: #0c447c;
    --success: #3b6d11;
    --success-bg: #eaf3de;
    --danger: #a32d2d;
    --danger-bg: #fcebeb;
    --radius: 8px;
  }

  @media (prefers-color-scheme: dark) {
    :root {
      --bg: #1a1a18;
      --surface: #242422;
      --surface2: #2c2c2a;
      --border: #3a3a38;
      --border-strong: #505050;
      --text: #f0f0ec;
      --text-sec: #aaa;
      --text-muted: #666;
      --accent: #378add;
      --accent-bg: #0c2a45;
      --accent-text: #85b7eb;
      --success: #7dc050;
      --success-bg: #1a3008;
      --danger: #e24b4a;
      --danger-bg: #3a1010;
    }
  }