/* Shared design tokens — colors, typography, spacing.
   Earthy palette: forest greens, warm soils, muted neutrals. */

:root {
  /* Palette */
  --c-bg:        #fafaf6;
  --c-surface:   #ffffff;
  --c-surface-2: #f1efe7;
  --c-border:    #d8d4c5;
  --c-text:      #1d2417;
  --c-text-2:    #5a5e4c;
  --c-text-3:    #8a8c78;
  --c-primary:   #2e7d32;
  --c-primary-d: #1b5e20;
  --c-primary-l: #c8e6c9;
  --c-accent:    #c2410c;  /* terracotta */
  --c-warning:   #d97706;
  --c-danger:    #b91c1c;
  --c-info:      #0369a1;

  /* Status indicator */
  --c-online:    #16a34a;
  --c-offline:   #6b7280;
  --c-syncing:   #d97706;

  /* Typography */
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-md: 1rem;
  --fs-lg: 1.125rem;
  --fs-xl: 1.5rem;
  --fs-2xl: 2rem;

  /* Spacing */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.25rem;
  --sp-6: 1.5rem;
  --sp-8: 2rem;
  --sp-10: 2.5rem;

  /* Radii & shadows */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.06), 0 1px 1px rgba(0,0,0,0.04);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.04);
  --shadow-lg: 0 12px 32px rgba(0,0,0,0.12), 0 4px 8px rgba(0,0,0,0.06);

  /* Touch */
  --touch-min: 44px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --c-bg:        #14160f;
    --c-surface:   #1c1f17;
    --c-surface-2: #262a1f;
    --c-border:    #3a3e30;
    --c-text:      #ecebe0;
    --c-text-2:    #b8b9a8;
    --c-text-3:    #7c7e6c;
    --c-primary:   #66bb6a;
    --c-primary-d: #4caf50;
    --c-primary-l: #2e3d2d;
  }
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: var(--font-body);
  font-size: var(--fs-md);
  color: var(--c-text);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

button, input, textarea, select {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  border: none;
  background: none;
  padding: 0;
}