/* GreenMagpie design tokens.
   Structure inspired by Radix Colors (12-step semantic scale per hue) and Open Props
   (systematic spacing/type scale) — see RESEARCH_NOTES.md. Values are original.

   Light is the default (a warm, airy paper-and-ink feel, colors sampled from logo.png's
   greens); dark is a deep forest-night inversion, not a stark near-black. Both meet WCAG AA
   for body text on their surfaces. */

:root {
  /* ---- Palette: colors sampled directly from the GreenMagpie logo (logo.png) ---- */
  --cream-50:  #faf8f2;
  --cream-100: #f2efe4;
  --cream-200: #e8efe0;
  --cream-300: #d3e0c8;
  --cream-400: #b9cfa8;
  --ink-900:   #0d2a16;
  --ink-800:   #16351f;
  --ink-700:   #34492f;
  --ink-500:   #5c6e54;
  --ink-300:   #94a68a;

  /* ---- Accent: the logo's leaf/forest greens ---- */
  --leaf-50:  #eef6e8;
  --leaf-100: #dcedd0;
  --leaf-200: #b7dc9d;
  --leaf-300: #8fc46b;
  --leaf-400: #6ba842;
  --leaf-500: #4a8c2e;
  --leaf-600: #3c7024;
  --leaf-700: #2c5419;
  --leaf-800: #1c3810;
  --leaf-900: #0f2409;

  /* ---- Secondary accent: warm coral, a nod to the real green magpie bird's red beak ---- */
  --peach-100: #fbe6dc;
  --peach-300: #f0ab8a;
  --peach-500: #dd7148;
  --peach-700: #a94a26;

  /* ---- Semantic: credit (teal, distinct from the leaf-green brand accent) /
     debt (warm terracotta) — never harsh red/green ---- */
  --sage-100: #dcf0ee;
  --sage-300: #8ecac3;
  --sage-500: #2f8f84;
  --sage-700: #1e5f57;

  --terra-100: #fbe8e0;
  --terra-300: #e6a889;
  --terra-500: #c66a3f;
  --terra-700: #94472a;

  /* ---- Semantic: pending/needs-approval (warm amber — caution without accusation, Night 8) ---- */
  --amber-100: #fbf0d9;
  --amber-300: #e0b04a;
  --amber-500: #c4931f;
  --amber-700: #8a6215;

  /* ---- Type scale (major third, ~1.25) ---- */
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-md:   1.125rem;
  --text-lg:   1.4rem;
  --text-xl:   1.75rem;
  --text-2xl:  2.2rem;
  --text-3xl:  2.75rem;

  /* ---- Spacing scale ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;

  /* ---- Radii: soft, organic, never sharp ---- */
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-pill: 999px;

  /* ---- Motion ---- */
  --ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
  --duration-fast: 120ms;
  --duration-base: 220ms;
  --duration-slow: 420ms;

  /* ---- Fonts ---- */
  --font-display: "Fraunces Soft", Georgia, serif;
  --font-body: "Inter Variable", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* ==== Semantic tokens (light, default) ==== */
  --bg: var(--cream-50);
  --bg-subtle: var(--cream-100);
  --surface: #ffffff;
  --surface-2: var(--cream-100);
  --border: var(--cream-300);
  --border-strong: var(--ink-300);

  --text: var(--ink-900);
  --text-dim: var(--ink-700);
  --text-faint: var(--ink-500);
  --text-on-accent: #ffffff;

  --accent: var(--leaf-600);
  --accent-hover: var(--leaf-700);
  --accent-subtle: var(--leaf-100);
  --accent-border: var(--leaf-300);

  --highlight: var(--peach-500);
  --highlight-subtle: var(--peach-100);

  --credit: var(--sage-700);
  --credit-subtle: var(--sage-100);
  --debt: var(--terra-700);
  --debt-subtle: var(--terra-100);
  --pending: var(--amber-700);
  --pending-subtle: var(--amber-100);

  --shadow-sm: 0 1px 2px rgba(43, 35, 32, 0.06), 0 1px 1px rgba(43, 35, 32, 0.04);
  --shadow-md: 0 4px 16px rgba(43, 35, 32, 0.08), 0 2px 6px rgba(43, 35, 32, 0.05);
  --shadow-lg: 0 12px 32px rgba(43, 35, 32, 0.14), 0 4px 12px rgba(43, 35, 32, 0.08);
}

/* ==== Dark mode: system preference ==== */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #16211a;
    --bg-subtle: #1c2921;
    --surface: #202f26;
    --surface-2: #28392e;
    --border: #3a5041;
    --border-strong: #547059;

    --text: var(--cream-100);
    --text-dim: var(--cream-300);
    --text-faint: #93a897;
    --text-on-accent: #ffffff;

    --accent: var(--leaf-300);
    --accent-hover: var(--leaf-200);
    --accent-subtle: #253a2b;
    --accent-border: var(--leaf-600);

    --highlight: var(--peach-300);
    --highlight-subtle: #3d2c22;

    --credit: var(--sage-300);
    --credit-subtle: #1e332f;
    --debt: var(--terra-300);
    --debt-subtle: #3a2a20;
    --pending: var(--amber-300);
    --pending-subtle: #3a2f18;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.35);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.45);
  }
}

/* ==== Dark mode: manual toggle wins either direction ==== */
:root[data-theme="dark"] {
  --bg: #16211a;
  --bg-subtle: #1c2921;
  --surface: #202f26;
  --surface-2: #28392e;
  --border: #3a5041;
  --border-strong: #547059;

  --text: var(--cream-100);
  --text-dim: var(--cream-300);
  --text-faint: #93a897;
  --text-on-accent: #ffffff;

  --accent: var(--leaf-300);
  --accent-hover: var(--leaf-200);
  --accent-subtle: #253a2b;
  --accent-border: var(--leaf-600);

  --highlight: var(--peach-300);
  --highlight-subtle: #3d2c22;

  --credit: var(--sage-300);
  --credit-subtle: #1e332f;
  --debt: var(--terra-300);
  --debt-subtle: #3a2a20;
  --pending: var(--amber-300);
  --pending-subtle: #3a2f18;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.45);
}

:root[data-theme="light"] {
  --bg: var(--cream-50);
  --bg-subtle: var(--cream-100);
  --surface: #ffffff;
  --surface-2: var(--cream-100);
  --border: var(--cream-300);
  --border-strong: var(--ink-300);
  --text: var(--ink-900);
  --text-dim: var(--ink-700);
  --text-faint: var(--ink-500);
  --accent: var(--leaf-600);
  --accent-hover: var(--leaf-700);
  --accent-subtle: var(--leaf-100);
  --accent-border: var(--leaf-300);
  --highlight: var(--peach-500);
  --highlight-subtle: var(--peach-100);
  --credit: var(--sage-700);
  --credit-subtle: var(--sage-100);
  --debt: var(--terra-700);
  --debt-subtle: var(--terra-100);
  --pending: var(--amber-700);
  --pending-subtle: var(--amber-100);
  --shadow-sm: 0 1px 2px rgba(43, 35, 32, 0.06), 0 1px 1px rgba(43, 35, 32, 0.04);
  --shadow-md: 0 4px 16px rgba(43, 35, 32, 0.08), 0 2px 6px rgba(43, 35, 32, 0.05);
  --shadow-lg: 0 12px 32px rgba(43, 35, 32, 0.14), 0 4px 12px rgba(43, 35, 32, 0.08);
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}