:root {
  color-scheme: light;
  --console-font-sans: "IBM Plex Sans Thai", "Leelawadee UI", system-ui, -apple-system, sans-serif;
  --console-font-display: Manrope, "IBM Plex Sans Thai", "Leelawadee UI", system-ui, sans-serif;
  --console-bg: #f3f6f3;
  --console-surface: #ffffff;
  --console-surface-soft: #edf3ee;
  --console-surface-warm: #fff7e8;
  --console-ink: #15231b;
  --console-muted: #5a695f;
  --console-line: #d7e1da;
  --console-line-strong: #b9cbbf;
  --console-green: #246b4d;
  --console-green-strong: #174f39;
  --console-green-soft: #e1f0e7;
  --console-gold: #96611e;
  --console-gold-soft: #fbefd8;
  --console-red: #b4232f;
  --console-red-soft: #fff1f2;
  --console-blue: #2463a9;
  --console-blue-soft: #eef5ff;
  --console-shadow-sm: 0 1px 2px rgba(21, 35, 27, 0.04), 0 8px 24px rgba(21, 35, 27, 0.05);
  --console-shadow: 0 2px 4px rgba(21, 35, 27, 0.05), 0 18px 48px rgba(21, 35, 27, 0.09);
  --console-radius-sm: 0.75rem;
  --console-radius: 1rem;
  --console-radius-lg: 1.35rem;
  --console-space-1: 0.25rem;
  --console-space-2: 0.5rem;
  --console-space-3: 0.75rem;
  --console-space-4: 1rem;
  --console-space-5: 1.25rem;
  --console-space-6: 1.5rem;
  --console-space-8: 2rem;
  --console-space-10: 2.5rem;
  --console-content-max: 1540px;
  --console-focus: 0 0 0 3px rgba(36, 107, 77, 0.24);

  --primary: var(--console-green);
  --primary-hover: var(--console-green-strong);
  --accent: var(--console-gold);
  --bg-dark: var(--console-bg);
  --bg-card: var(--console-surface);
  --bg-input: #fbfcfb;
  --surface: var(--console-surface-soft);
  --text: var(--console-ink);
  --text-muted: var(--console-muted);
  --text-secondary: var(--console-muted);
  --border: var(--console-line);
  --border-color: var(--console-line);
  --bg: var(--console-surface);
  --radius-sm: var(--console-radius-sm);
  --radius-md: var(--console-radius);
  --radius-lg: var(--console-radius-lg);
}

html[data-theme="dark"] {
  color-scheme: dark;
  --console-bg: #0f1712;
  --console-surface: #17211a;
  --console-surface-soft: #202d24;
  --console-surface-warm: #2d261b;
  --console-ink: #eff6f1;
  --console-muted: #b4c1b8;
  --console-line: #33443a;
  --console-line-strong: #4b6052;
  --console-green: #7fc69e;
  --console-green-strong: #a4d9b9;
  --console-green-soft: #213c2c;
  --console-gold: #f0c778;
  --console-gold-soft: #3a3020;
  --console-red: #ff929c;
  --console-red-soft: #402125;
  --console-blue: #91bfff;
  --console-blue-soft: #20344e;
  --console-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2), 0 8px 24px rgba(0, 0, 0, 0.16);
  --console-shadow: 0 18px 48px rgba(0, 0, 0, 0.32);
}