/* Theme Variables */
:root {
  /* Monochrome: White, Gray & Black */
  --bg-main: #f5f5f5;
  --text-main: #1a1a1a;
  --text-sub: #5a5a5a;
  --logo-gray: #1a1a1a;

  --accent-jade: #1a1a1a;
  --accent-white: #ffffff;

  --glass-bg: rgba(255, 255, 255, 0.7);
  --glass-border: rgba(26, 26, 26, 0.15);
  --glass-shadow: rgba(0, 0, 0, 0.08);

  --shippou-color: #e2e2e2;
  --shippou-line: rgba(26, 26, 26, 0.1);

  --particle-color-1: 60, 60, 60;
  --particle-color-2: 120, 120, 120;
  --particle-color-3: 90, 90, 90;
  --particle-alpha: 0.3;

  --noise-opacity: 0.015;

  /* Values のスポットライト — 光の当たっていない文字の残し具合 */
  --value-dim: 14%;

  /* 後光 (halo) — light theme: subtle soft bloom */
  --halo-rgb: 90, 90, 90;
  --halo-a1: 0.12;
  --halo-a2: 0.05;
  --glow-a: 0.14;

  /* RGB channels for Tailwind alpha-aware grayscale (light theme) */
  --bg-rgb: 245, 245, 245;
  --card-bg: #ffffff;
  --jade-rgb: 26 26 26;
  --lime-400-rgb: 156 163 175;
  --lime-500-rgb: 107 114 128;
  --lime-600-rgb: 75 85 99;
  --lime-700-rgb: 55 65 81;
  --lime-800-rgb: 31 41 55;
}

/* Dark Theme */
[data-theme="dark"] {
  --bg-main: #0d0d0d;
  --text-main: #f5f5f5;
  --text-sub: #a0a0a0;
  --logo-gray: #f5f5f5;

  --accent-jade: #f5f5f5;
  --accent-white: #ffffff;

  --glass-bg: rgba(20, 20, 20, 0.7);
  --glass-border: rgba(255, 255, 255, 0.15);
  --glass-shadow: rgba(0, 0, 0, 0.5);

  --shippou-color: #1a1a1a;
  --shippou-line: rgba(255, 255, 255, 0.08);

  --particle-color-1: 200, 200, 200;
  --particle-color-2: 150, 150, 150;
  --particle-color-3: 180, 180, 180;
  --particle-alpha: 0.3;

  --value-dim: 16%;

  /* 後光 (halo) — dark theme: luminous white edge glow */
  --halo-rgb: 255, 255, 255;
  --halo-a1: 0.35;
  --halo-a2: 0.14;
  --glow-a: 0.45;

  --bg-rgb: 13, 13, 13;
  --card-bg: #161616;
  --jade-rgb: 245 245 245;
  --lime-400-rgb: 107 114 128;
  --lime-500-rgb: 156 163 175;
  --lime-600-rgb: 203 213 225;
  --lime-700-rgb: 229 231 235;
  --lime-800-rgb: 243 244 246;
}