:root {
  color-scheme: dark;

  /* === Backgrounds === */
  --color-bg:        #2A2A2E;
  --color-surface:   #34343A;
  --color-surface-2: #3E3E46;
  --color-input:     #232326;
  --color-modal-bg:  rgba(42, 42, 46, 0.88);

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

  /* === Matcha / Sage Green Accent === */
  --color-matcha:       #7AB87A;
  --color-matcha-light: #94CC94;
  --color-matcha-bg:    rgba(122, 184, 122, 0.12);

  /* === Status Colors === */
  --color-danger:       #E06C75;
  --color-danger-bg:    rgba(224, 108, 117, 0.12);
  --color-warning:      #E5C07B;
  --color-warning-bg:   rgba(229, 192, 123, 0.12);

  /* === Borders === */
  --color-line:        #4A4A52;
  --color-line-strong: #5A5A64;
  --color-border-focus: var(--color-matcha);

  /* === Typography === */
  --font-display: "Zen Kaku Gothic New", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body:    "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono:    "JetBrains Mono", "SF Mono", Menlo, Monaco, Consolas, monospace;

  /* === Radius === */
  --radius:    8px;
  --radius-sm: 5px;
  --radius-lg: 12px;

  /* === Shadows === */
  --shadow-card:  0 4px 20px rgba(0, 0, 0, 0.25);
  --shadow-modal: 0 16px 40px rgba(0, 0, 0, 0.45);
}