@import url("https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;500;600&family=Noto+Sans+Mono:wght@400;500&display=swap");

:root {
  --md-primary: #1a73e8;
  --md-primary-strong: #185abc;
  --md-secondary: #34a853;
  --md-danger: #d93025;
  --md-surface: #ffffff;
  --md-background: #f8f9fa;
  --md-outline: #dadce0;
  --md-text: #202124;
  --md-text-muted: #5f6368;
  --md-shadow-1: 0 8px 20px rgba(32, 33, 36, 0.12);
  --md-shadow-2: 0 14px 32px rgba(32, 33, 36, 0.16);
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;

  --ink: var(--md-text);
  --ink-soft: #3c4043;
  --muted: var(--md-text-muted);
  --paper: var(--md-background);
  --panel: var(--md-surface);
  --accent: var(--md-primary);
  --accent-2: var(--md-secondary);
  --danger: var(--md-danger);
  --shadow: var(--md-shadow-1);

  --menu-ink: var(--md-text);
  --menu-panel: var(--md-surface);
  --menu-accent: var(--md-primary);
  --menu-muted: var(--md-text-muted);
  --menu-shadow: var(--md-shadow-2);
}

[data-theme="dark"] {
  --md-primary: #8ab4f8;
  --md-primary-strong: #669df6;
  --md-secondary: #81c995;
  --md-danger: #f28b82;
  --md-surface: #1f1f1f;
  --md-background: #121212;
  --md-outline: #3c4043;
  --md-text: #e8eaed;
  --md-text-muted: #9aa0a6;
  --md-shadow-1: 0 8px 20px rgba(0, 0, 0, 0.5);
  --md-shadow-2: 0 14px 32px rgba(0, 0, 0, 0.6);
}

[data-theme="blue"] {
  --md-primary: #1967d2;
  --md-primary-strong: #174ea6;
  --md-secondary: #1e8e3e;
  --md-danger: #c5221f;
  --md-surface: #fefcff;
  --md-background: #eef3fd;
  --md-outline: #c6dafc;
  --md-text: #1f1f1f;
  --md-text-muted: #4a4f55;
  --md-shadow-1: 0 10px 22px rgba(26, 115, 232, 0.15);
  --md-shadow-2: 0 18px 36px rgba(26, 115, 232, 0.18);
}

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

body {
  margin: 0;
  font-family: "Noto Sans", "Segoe UI", sans-serif;
  color: var(--md-text);
  background: var(--md-background);
}

h1, h2, h3, h4 {
  font-weight: 600;
  color: var(--md-text);
}

a {
  color: var(--md-primary);
}

.card {
  background: var(--md-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--md-shadow-1);
  border: 1px solid var(--md-outline);
}

input,
select,
textarea,
button {
  font-family: inherit;
}