@import 'tailwindcss';

/* Garden-planner theme tokens. Each --color-* becomes a Tailwind utility
   (bg-*, text-*, border-*). Light by default; dark via prefers-color-scheme. */
@theme {
  --color-bg: #f8faf7;
  --color-surface: #ffffff;
  --color-border: #e3e8e0;
  --color-muted: #61705d;
  --color-fg: #1c2419;

  --color-accent: #3f8f4f;
  --color-accent-strong: #2f7a3e;
  --color-accent-contrast: #ffffff;

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

@layer base {
  html,
  body,
  #root {
    height: 100%;
  }
  body {
    background-color: var(--color-bg);
    color: var(--color-fg);
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
  }

  /* Keyboard focus on a canvas object (#84). :focus-visible shows the ring for
     keyboard focus but not a mouse click; the dashed accent ring distinguishes
     "focused" from the solid ring that marks "selected". A CSS rule overrides
     the shape's inline stroke presentation attributes. */
  .object-shape {
    outline: none;
  }
  .object-shape:focus-visible :is(rect, ellipse) {
    stroke: var(--color-accent-strong);
    stroke-width: 2;
    stroke-dasharray: 5 4;
  }
}

/* Dark theme: override the same tokens so utilities recolor automatically. */
@media (prefers-color-scheme: dark) {
  @theme {
    --color-bg: #10140f;
    --color-surface: #171c15;
    --color-border: #2a3226;
    --color-muted: #8a967f;
    --color-fg: #e7ede2;

    --color-accent: #5bb06a;
    --color-accent-strong: #6fc07d;
    --color-accent-contrast: #0c1109;
  }
}