/* tiarella design tokens (Layer 4). Light and airy lilac, with darker notes taken from the plant:
 * foamflower's dark green leaves and burgundy leaf veins. Lilac carries backgrounds and soft fills;
 * text and buttons use the dark notes so contrast stays high (all text pairs below 4.5:1 or better). */
:root {
  --t-mist: #F6F2FA;      /* page background */
  --t-paper: #FFFFFF;     /* cards */
  --t-lilac: #CDBDEB;     /* soft fills, selected chips, bloom bars */
  --t-lilac-soft: #E9E1F5;/* tints, hover */
  --t-line: #DDD2EC;      /* hairlines and borders */
  --t-ink: #262130;       /* text: aubergine-charcoal, 14:1 on mist */
  --t-muted: #5E566B;     /* secondary text, 6.3:1 on mist */
  --t-moss: #44522B;      /* dark note: primary buttons, "Grows in pots" tag; 8.4:1 with white */
  --t-vein: #6A2A39;      /* dark note: counts, sparing emphasis; 9.5:1 on mist */
  --t-radius-soft: 18px;  /* cards and tiles: soft */
  --t-radius-firm: 3px;   /* buttons and tags: squared, sturdier */
  --t-display: 'Fraunces Variable', 'Iowan Old Style', Georgia, serif; /* light weight, soft shapes */
  --t-ui: 'Archivo', 'Helvetica Neue', Arial, sans-serif;               /* sturdy grotesque for UI and body */
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --t-mist: #1C1822; --t-paper: #25202C; --t-lilac: #5B4A7A; --t-lilac-soft: #2F2838; --t-line: #3A3245;
    --t-ink: #F1ECF7; --t-muted: #B7AEC4; --t-moss: #9DB07A; --t-vein: #E2A3B2;
  }
}
:root[data-theme="dark"] {
  --t-mist: #1C1822; --t-paper: #25202C; --t-lilac: #5B4A7A; --t-lilac-soft: #2F2838; --t-line: #3A3245;
  --t-ink: #F1ECF7; --t-muted: #B7AEC4; --t-moss: #9DB07A; --t-vein: #E2A3B2;
}

/* tiarella styles (Layer 4). Colors and type come from tokens.css. */
@font-face{font-family:'Fraunces Variable';src:url(/fonts/fraunces-latin-full-normal.woff2) format('woff2');font-weight:100 900;font-display:swap}
@font-face{font-family:'Archivo';src:url(/fonts/archivo-latin-400-normal.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Archivo';src:url(/fonts/archivo-latin-500-normal.woff2) format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Archivo';src:url(/fonts/archivo-latin-700-normal.woff2) format('woff2');font-weight:700;font-display:swap}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--t-mist);color:var(--t-ink);font:400 16px/1.55 var(--t-ui)}
a{color:var(--t-ink);text-underline-offset:3px}
button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:3px solid var(--t-moss);outline-offset:3px}
[hidden]{display:none!important}
.wrap{max-width:1120px;margin:auto;padding:0 24px}
.display{font-family:var(--t-display);font-weight:300;font-variation-settings:'SOFT' 100,'opsz' 72;letter-spacing:-.01em}

/* Header */
.top{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 0}
.mark{text-decoration:none;display:block}
.mark b{display:block;font:300 30px/1 var(--t-display);font-variation-settings:'SOFT' 100,'opsz' 72;letter-spacing:-.01em}
.mark small{display:block;font-size:12px;color:var(--t-muted);margin-top:4px}
.top nav{display:flex;align-items:center;gap:18px;font-weight:500;font-size:15px}
.top nav a{text-decoration:none}
.state{display:flex;border:1px solid var(--t-ink);border-radius:var(--t-radius-firm);overflow:hidden}
.state button{border:0;background:none;padding:6px 10px;font-size:13px;font-weight:700;min-height:32px}
.state button[aria-pressed=true]{background:var(--t-ink);color:var(--t-mist)}

/* Home */
.hero{padding:36px 0 24px}
h1{font:300 clamp(40px,6.4vw,74px)/1.02 var(--t-display);font-variation-settings:'SOFT' 100,'opsz' 144;letter-spacing:-.02em;margin:0 0 14px;max-width:13ch}
.lede{color:var(--t-muted);max-width:54ch;margin:0 0 26px;font-size:18px}
.spaces{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:0 0 18px}
.space{text-align:left;background:var(--t-paper);border:1px solid var(--t-line);border-radius:var(--t-radius-soft);padding:20px;min-height:96px}
.space[aria-pressed=true]{background:var(--t-lilac-soft);border-color:var(--t-lilac);box-shadow:inset 0 0 0 1px var(--t-lilac)}
.space b{display:block;font:400 22px/1.2 var(--t-display);font-variation-settings:'SOFT' 100;margin-bottom:6px}
.space span{color:var(--t-muted);font-size:14px}
.seg{display:inline-flex;border:1px solid var(--t-ink);border-radius:var(--t-radius-firm);overflow:hidden;max-width:100%}
.seg button{border:0;background:none;padding:10px 16px;min-height:44px;font-weight:500;font-size:14px}
.seg button+button{border-left:1px solid var(--t-ink)}
.seg button[aria-pressed=true]{background:var(--t-ink);color:var(--t-mist)}
.sunhint{color:var(--t-muted);font-size:14px;margin:8px 0 0}
.results-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin:42px 0 12px}
h2{font:300 34px/1.12 var(--t-display);font-variation-settings:'SOFT' 100;margin:0}
.count{font-weight:700;font-size:14px;color:var(--t-vein);white-space:nowrap}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px}
.chip{border:1px solid var(--t-line);background:var(--t-paper);border-radius:999px;padding:6px 12px;font-size:14px;min-height:36px;display:inline-flex;align-items:center;gap:6px}
.chip[aria-pressed=true]{background:var(--t-lilac);border-color:var(--t-lilac)}
.dot{display:inline-block;width:10px;height:10px;border-radius:50%;flex:none;border:1px solid rgba(0,0,0,.12)}
.empty{background:var(--t-paper);border:1px dashed var(--t-lilac);border-radius:var(--t-radius-soft);padding:24px;color:var(--t-muted)}

/* Cards */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;list-style:none;padding:0;margin:0}
.card{background:var(--t-paper);border-radius:var(--t-radius-soft);overflow:hidden;border:1px solid var(--t-line);display:flex;flex-direction:column}
.card .ph{display:block;aspect-ratio:4/3;overflow:hidden;background:var(--t-lilac-soft)}
.card img{width:100%;height:100%;object-fit:cover;display:block}
.card .body{padding:16px 18px 18px;display:flex;flex-direction:column;flex:1}
.card .name{font:400 22px/1.2 var(--t-display);font-variation-settings:'SOFT' 100;margin:0 0 2px;text-decoration:none}
.sci{font-style:italic;color:var(--t-muted);font-size:14px;margin:0 0 10px}
.facts{display:flex;gap:6px 14px;flex-wrap:wrap;font-size:14px;color:var(--t-muted);margin:0 0 12px}
.facts span{display:inline-flex;align-items:center;gap:6px}
.tags{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:auto}
.tag{font:700 12px/1 var(--t-ui);letter-spacing:.02em;padding:6px 8px;border-radius:var(--t-radius-firm)}
.tag.pot{background:var(--t-moss);color:#fff}
.tag.value{background:var(--t-lilac-soft);color:var(--t-ink)}
.tag.caution{background:transparent;color:var(--t-vein);border:1px solid var(--t-vein)}
.add{margin-left:auto;font-weight:500;font-size:14px;background:none;border:1px solid var(--t-ink);border-radius:var(--t-radius-firm);padding:8px 12px;min-height:40px}
.add[aria-pressed=true]{background:var(--t-moss);border-color:var(--t-moss);color:#fff}
.more{display:block;margin:24px auto 0;background:none;border:1px solid var(--t-ink);border-radius:var(--t-radius-firm);padding:10px 18px;font-weight:500}

/* List bar */
.bar{position:sticky;bottom:12px;z-index:5;background:var(--t-ink);color:var(--t-mist);border-radius:var(--t-radius-soft);padding:14px 18px;display:flex;justify-content:space-between;align-items:center;gap:12px;margin:32px 0 12px;box-shadow:0 10px 30px rgba(38,33,48,.25)}
.bar b{font:300 22px var(--t-display);font-variation-settings:'SOFT' 100}
.bar a{background:var(--t-moss);color:#fff;border-radius:var(--t-radius-firm);padding:11px 16px;font-weight:700;font-size:15px;text-decoration:none;white-space:nowrap}

/* Plant page */
.crumb{font-size:14px;margin:4px 0 18px}
.plant{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:40px;align-items:start;padding-bottom:20px}
.plant .photo{border-radius:var(--t-radius-soft);overflow:hidden;min-height:0;background:var(--t-lilac-soft);aspect-ratio:4/5}
.plant .photo img{width:100%;height:100%;object-fit:cover;display:block}
.credit{font-size:12px;color:var(--t-muted);margin:8px 0 0}
.plant h1{font-size:clamp(38px,5vw,60px);max-width:none;margin-bottom:4px}
.plant .sci{font-size:17px;margin-bottom:18px}
.verdict{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 22px}
.dl{display:grid;grid-template-columns:max-content 1fr;gap:10px 22px;margin:0 0 24px;padding:18px 0;border-top:1px solid var(--t-line);border-bottom:1px solid var(--t-line)}
.dl dt{color:var(--t-muted);font-size:14px}
.dl dd{margin:0}
.actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin:0 0 20px}
.btn{background:var(--t-moss);color:#fff;border:0;border-radius:var(--t-radius-firm);padding:12px 18px;font-weight:700;min-height:44px;text-decoration:none;display:inline-flex;align-items:center}
.btn.ghost{background:none;color:var(--t-ink);border:1px solid var(--t-ink)}
.note{font-size:14px;color:var(--t-muted)}
.pairs{margin:28px 0 0}
.pairs h2{font-size:28px;margin-bottom:14px}

/* List page */
.items{list-style:none;padding:0;margin:0 0 20px;display:grid;gap:12px}
.item{display:grid;grid-template-columns:72px 1fr auto;gap:14px;align-items:center;background:var(--t-paper);border:1px solid var(--t-line);border-radius:var(--t-radius-soft);padding:10px 14px 10px 10px}
.item img,.item .ph{width:72px;height:72px;border-radius:12px;object-fit:cover;background:var(--t-lilac-soft);display:block}
.item .name{font:400 20px/1.2 var(--t-display);font-variation-settings:'SOFT' 100;text-decoration:none}
.item p{margin:2px 0 0;font-size:14px;color:var(--t-muted)}
.qty{display:flex;align-items:center;border:1px solid var(--t-ink);border-radius:var(--t-radius-firm)}
.qty button{border:0;background:none;width:40px;height:40px;font-size:18px}
.qty output{min-width:28px;text-align:center;font-weight:700}
.remove{border:0;background:none;color:var(--t-muted);text-decoration:underline;font-size:13px;padding:4px 0;margin-top:4px}
.total{font:300 26px var(--t-display);font-variation-settings:'SOFT' 100;margin:8px 0 18px}

footer{color:var(--t-muted);font-size:14px;padding:24px 0 40px;border-top:1px solid var(--t-line);margin-top:40px}
footer p{margin:0 0 6px;max-width:70ch}

@media (max-width:760px){
  .wrap{padding:0 16px}
  .spaces,.cards{grid-template-columns:1fr}
  .space{min-height:0;padding:16px}
  .seg{display:flex;width:100%}.seg button{flex:1;padding:10px 4px;font-size:13px}
  .plant{grid-template-columns:1fr;gap:20px}
  .plant .photo{aspect-ratio:4/3}
  .top nav{gap:12px;font-size:14px}
  .results-head{flex-direction:column;gap:4px}
  .bar{bottom:8px}
  .item{grid-template-columns:56px 1fr;}.item img,.item .ph{width:56px;height:56px}
  .item .qtycell{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center}
}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}
@media print{.top nav,.bar,.actions,.qty button,.remove,footer,.listbtns{display:none!important}body{background:#fff}.item{break-inside:avoid;border-color:#ccc}}