/* === BASE: CSS variables, reset, body === */

:root {
  /* Backgrounds */
  --color-background-primary: #ffffff;
  --color-background-secondary: #f5f5f5;

  /* Text */
  --color-text-primary: #0f172a;
  --color-text-secondary: #64748b;
  --color-text-tertiary: #94a3b8;

  /* Semantic text */
  --color-text-info: #3b82f6;
  --color-text-success: #16a34a;
  --color-text-warning: #d97706;
  --color-text-danger: #dc2626;

  /* Borders */
  --color-border-tertiary: #e2e8f0;
  --color-border-secondary: #cbd5e1;
  --color-border-info: #3b82f6;
  --color-border-success: #16a34a;
  --color-border-warning: #d97706;
  --color-border-danger: #dc2626;

  /* Semantic backgrounds (tinted) */
  --color-background-info: rgba(59, 130, 246, 0.12);
  --color-background-success: rgba(34, 197, 94, 0.12);
  --color-background-warning: rgba(245, 158, 11, 0.15);
  --color-background-danger: rgba(239, 68, 68, 0.12);

  /* Radius */
  --border-radius-md: 8px;
  --border-radius-lg: 12px;

  /* Shadow */
  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.08);

  /* Font */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-background-primary: #1a1a1a;
    --color-background-secondary: #262626;

    --color-text-primary: #f1f5f9;
    --color-text-secondary: #a3a3a3;
    --color-text-tertiary: #737373;

    --color-border-tertiary: #404040;
    --color-border-secondary: #525252;

    --color-background-info: rgba(59, 130, 246, 0.18);
    --color-background-success: rgba(34, 197, 94, 0.18);
    --color-background-warning: rgba(245, 158, 11, 0.18);
    --color-background-danger: rgba(239, 68, 68, 0.18);

    --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.4);
  }
}

/* Reset */
* {
  box-sizing: border-box;
  /* touch-action: manipulation removes the 300ms tap delay AND disables
     double-tap-to-zoom. Combined with the JS pinch-zoom blocker in main.js,
     this makes the app feel native-app-responsive on mobile. */
  touch-action: manipulation;
}

html, body {
  margin: 0;
  padding: 0;
}

body {
  max-width: 480px;
  margin: 0 auto;
  padding: 0 1rem;
  background: var(--color-background-secondary);
  color: var(--color-text-primary);
  min-height: 100vh;
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
}

/* Buttons & inputs — sane defaults */
button {
  font-family: inherit;
  font-size: 14px;
  background: var(--color-background-primary);
  color: var(--color-text-primary);
  border: 0.5px solid var(--color-border-tertiary);
  border-radius: var(--border-radius-md);
  padding: 8px 12px;
  cursor: pointer;
  transition: opacity 0.15s ease;
  /* Mobile polish: no text selection on tap, no grey tap-highlight on iOS. */
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

button:hover:not(:disabled) {
  opacity: 0.85;
}

button:disabled {
  cursor: not-allowed;
}

input, select, textarea {
  font-family: inherit;
  font-size: 14px;
  background: var(--color-background-primary);
  color: var(--color-text-primary);
  border: 0.5px solid var(--color-border-tertiary);
  border-radius: var(--border-radius-md);
  padding: 8px 10px;
  outline: none;
}

input:focus, select:focus, textarea:focus {
  border-color: var(--color-border-info);
}

/* Screen reader only (for h2.sr-only that was in widget) */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Mobile polish for non-button clickable elements.
   Buttons get this via the `button` selector above; these classes
   are <label>/<div>/<a> that aren't covered there. */
.wt-tab, .wt-subtab, .wt-chip, .wt-pm,
.wt-article-card, .wt-ss-toggle, .wt-ds-toggle {
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}