/* theme.css — Google-Calendar-style light Material theme + dark mode tokens. */

:root {
  /* Surfaces */
  --wc-bg: #ffffff;
  --wc-surface: #ffffff;
  --wc-surface-2: #f1f3f4;
  --wc-surface-hover: #f1f3f4;
  --wc-drawer-bg: #ffffff;
  --wc-overlay: rgba(32, 33, 36, 0.5);

  /* Text */
  --wc-text: #3c4043;
  --wc-text-strong: #202124;
  --wc-text-muted: #5f6368;
  --wc-text-faint: #80868b;

  /* Lines */
  --wc-line: #dadce0;
  --wc-line-soft: #e8eaed;

  /* Accent (Google blue family) */
  --wc-accent: #1a73e8;
  --wc-accent-weak: #e8f0fe;
  --wc-today: #1a73e8;
  --wc-today-fg: #ffffff;

  /* Elevation */
  --wc-sh-1: 0 1px 2px rgba(60,64,67,.18), 0 1px 3px rgba(60,64,67,.10);
  --wc-sh-2: 0 1px 3px rgba(60,64,67,.20), 0 4px 8px rgba(60,64,67,.12);
  --wc-sh-3: 0 4px 8px rgba(60,64,67,.20), 0 8px 24px rgba(60,64,67,.16);

  /* Shape */
  --wc-radius: 8px;
  --wc-radius-lg: 16px;
  --wc-chip-radius: 6px;

  --wc-appbar-h: 56px;
  --wc-drawer-w: 256px;

  --wc-font: 'Inter', 'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

:root[data-theme="dark"] {
  --wc-bg: #202124;
  --wc-surface: #2a2b2d;
  --wc-surface-2: #35363a;
  --wc-surface-hover: #3a3b3e;
  --wc-drawer-bg: #202124;
  --wc-overlay: rgba(0,0,0,.6);

  --wc-text: #e8eaed;
  --wc-text-strong: #ffffff;
  --wc-text-muted: #9aa0a6;
  --wc-text-faint: #80868b;

  --wc-line: #3c4043;
  --wc-line-soft: #303134;

  --wc-accent: #8ab4f8;
  --wc-accent-weak: #283c5a;
  --wc-today: #8ab4f8;
  --wc-today-fg: #202124;

  --wc-sh-1: 0 1px 2px rgba(0,0,0,.4);
  --wc-sh-2: 0 2px 6px rgba(0,0,0,.5);
  --wc-sh-3: 0 8px 24px rgba(0,0,0,.6);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: var(--wc-font);
  color: var(--wc-text);
  background: var(--wc-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body { overflow: hidden; }

button { font-family: inherit; }

.material-symbols-rounded {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  user-select: none;
  line-height: 1;
}

/* Icon button — 44px touch target */
.wc-iconbtn {
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  border: none; background: transparent; color: var(--wc-text-muted);
  border-radius: 50%; cursor: pointer;
  transition: background .15s ease;
  flex: 0 0 auto;
}
.wc-iconbtn:hover { background: var(--wc-surface-hover); }
.wc-iconbtn:active { background: var(--wc-line-soft); }
.wc-iconbtn .material-symbols-rounded { font-size: 24px; }

/* Generic pill button */
.wc-btn {
  height: 40px; padding: 0 16px;
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--wc-line);
  background: var(--wc-surface);
  color: var(--wc-text-strong);
  border-radius: 999px; cursor: pointer; font-size: 14px; font-weight: 500;
  transition: background .15s ease, box-shadow .15s ease;
}
.wc-btn:hover { background: var(--wc-surface-hover); box-shadow: var(--wc-sh-1); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--wc-line); border-radius: 8px; border: 2px solid var(--wc-bg); }
::-webkit-scrollbar-thumb:hover { background: var(--wc-text-faint); }