/* =========================================================
   HOME TOOLS — SHARED DESIGN SYSTEM
   Single source of truth for Inventory, Tasks, and Shopping.
   Extracted verbatim from the reference mockups — do not
   fork per-app. If a value needs to change, change it here
   and re-copy into each app (see scripts/copy-shared.js).
   ========================================================= */
:root {
  /* --- Colour --- */
  --cream-bg:      #F3ECE1;
  --cream-card:    #FBF7F0;
  --timber:        #8B5A3C;
  --timber-dark:   #6B4226;
  --timber-tint:   #E9DCCC;
  --ink:           #3A2E24;
  --ink-soft:      #8A7C6C;
  --border:        #E4D9C8;

  /* category colours (rooms / tags) — also reused for person theming */
  --cat-sage:      #8A9A5B;
  --cat-sage-tint: #E7ECDB;
  --cat-terracotta:#C1683C;
  --cat-terracotta-tint:#F3E2D6;
  --cat-ochre:     #C0923C;
  --cat-ochre-tint:#F3E7D2;
  --cat-blue:      #6E8CA0;
  --cat-blue-tint: #DFE7EA;
  --cat-plum:      #8C6B8A;
  --cat-plum-tint: #EAE0EA;

  /* --- Type --- */
  --font-display: 'Quicksand', sans-serif;
  --font-body:    'Inter', sans-serif;

  /* --- Radius --- */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-pill: 999px;

  /* --- Shadow --- */
  --shadow-sm: 0 1px 3px rgba(58,46,36,0.07);
  --shadow-md: 0 4px 14px rgba(58,46,36,0.10);
  --shadow-lg: 0 10px 30px rgba(58,46,36,0.14);

  /* --- Motion --- */
  --ease: cubic-bezier(.4,0,.2,1);
  --fast: 150ms;
}

/* =========================================================
   Per-person theming (see people.icon / people.theme)
   Swap --timber / --timber-dark / --timber-tint at the
   document root for the active device user's session.
   Six values: timber (default) + the five category tints.
   ========================================================= */
:root[data-theme="sage"]       { --timber: var(--cat-sage);       --timber-tint: var(--cat-sage-tint); }
:root[data-theme="terracotta"] { --timber: var(--cat-terracotta); --timber-tint: var(--cat-terracotta-tint); }
:root[data-theme="ochre"]      { --timber: var(--cat-ochre);      --timber-tint: var(--cat-ochre-tint); }
:root[data-theme="blue"]       { --timber: var(--cat-blue);       --timber-tint: var(--cat-blue-tint); }
:root[data-theme="plum"]       { --timber: var(--cat-plum);       --timber-tint: var(--cat-plum-tint); }
/* --timber-dark isn't derivable from the tint tokens alone; each themed
   variant darkens --timber by roughly the same ratio as the default pair. */
:root[data-theme="sage"]       { --timber-dark: #6B7A43; }
:root[data-theme="terracotta"] { --timber-dark: #9A4E2A; }
:root[data-theme="ochre"]      { --timber-dark: #96722A; }
:root[data-theme="blue"]       { --timber-dark: #4E6A7C; }
:root[data-theme="plum"]       { --timber-dark: #6C4E6A; }

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  background: var(--cream-bg);
  color: var(--ink);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, .display { font-family: var(--font-display); font-weight: 700; color: var(--ink); }
button { font-family: inherit; cursor: pointer; }
a { color: inherit; }

a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--timber);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

.app {
  max-width: 480px;
  margin: 0 auto;
  min-height: 100vh;
  background: var(--cream-bg);
  position: relative;
  padding-bottom: 96px;
}
@media (min-width: 900px) {
  .app { max-width: 720px; }
}