/* Global shared styles for the Todo App */

:root {
  /* Custom green palette */
  --ws-blue: rgb(149, 193, 30);          /* primary green */
  --ws-blue-hover: rgb(119, 154, 24);    /* darker green for hover/active */

  /* Neutral palette for light theme */
  --bg: #ffffff;
  --bg-subtle: #f1f8e9;        /* light green tint */
  --text: #1f2937;
  --text-muted: #4a5568;
  --text-subtle: #718096;
  --border: #c8e6c9;           /* light green border */
  --danger: #d32f2f;
}

/* Base reset/typography */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  background: var(--bg);
  color: var(--text);
}

/* Utility classes for future use */
.ws-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 10px 16px; border-radius: 8px; border: 1px solid transparent;
  font-size: 14px; font-weight: 500; cursor: pointer; transition: all .2s;
}
.ws-btn-primary { background: var(--ws-blue); color: #fff; }
.ws-btn-primary:hover { background: var(--ws-blue-hover); transform: translateY(-1px); }

.ws-link { color: var(--ws-blue); text-decoration: none; }
.ws-link:hover { color: var(--ws-blue-hover); text-decoration: underline; }

/* Containers */
.ws-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 0 20px rgba(0,0,0,.06);
}

/* Forms */
.ws-input {
  width: 100%; padding: 12px 14px; border-radius: 8px; border: 1px solid var(--border);
  background: #fff; color: var(--text); font: inherit; transition: box-shadow .2s, border-color .2s;
}
.ws-input::placeholder { color: var(--text-subtle); }
.ws-input:focus { outline: none; border-color: var(--ws-blue); box-shadow: 0 0 0 3px rgba(10,37,64,.15); }

/* Header utility */
.ws-header {
  background: var(--ws-blue);
  color: #fff;
  border-bottom: 1px solid rgba(255,255,255,0.15);
}