:root {
  color-scheme: dark;

  /* === Backgrounds === */
  --color-bg:            #2A2A2E;
  --color-surface:       #34343A;
  --color-surface-2:     #3E3E46;
  --color-surface-hover: #464650;
  --color-surface-active:#4D4D58;

  /* === Text === */
  --color-text:       #F5F5F7;
  --color-text-muted: #A0A0A8;
  --color-text-dim:   #767680;

  /* === Sage / Matcha green accent === */
  --color-matcha:       #7AB87A;
  --color-matcha-light: #94CC94;
  --color-matcha-bg:    #263828;
  --color-matcha-border:#3A543D;

  /* === Danger / Warning === */
  --color-danger:       #E06C75;
  --color-danger-bg:    #3E2A2E;
  --color-danger-border:#5C353B;

  /* === Borders === */
  --color-line:        #4A4A52;
  --color-line-strong: #5A5A64;
  --color-line-subtle: #3A3A42;

  /* === Typography === */
  --font-display: "Zen Kaku Gothic New", "Noto Sans JP", sans-serif;
  --font-body:    "Noto Sans JP", sans-serif;
  --font-mono:    "JetBrains Mono", monospace;

  /* === Radius === */
  --radius:    8px;
  --radius-sm: 5px;
  --radius-full: 9999px;

  /* === Transitions & Shadows === */
  --transition-fast: 0.15s ease;
  --transition-bounce: 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.25);
  --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 12px 30px rgba(0, 0, 0, 0.5);
}