/* Plant Sourcerer — shared "Haute" rebrand theme.
   Single source of truth for the warm editorial look (cream + espresso +
   terracotta, serif display over Inter body, pill buttons, eyebrow labels).
   Surfaces link this file and inherit the tokens + component classes. Each
   surface's own :root may override a token where it needs a local meaning. */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,500;0,600;0,700;1,500;1,600&family=Inter:wght@400;500;600;700&display=swap');

:root{
  /* --- palette (re-maps the shared token names to the Haute palette) --- */
  --cream:#F3ECE1; --cream-alt:#EFE6D8; --paper:#FBF7F0;
  --ink:#2A1E15; --soil:#7A6A5B;
  --line:#E4D8C6; --sage:#D9CBB6;
  --clay:#C0542A; --clay-deep:#A2431F; --clay-soft:#EFE3CC;
  --gold:#B98A3E; --rust:#B4492E;
  --espresso:#2B1D14; --espresso-2:#3C2A1D;
  --bark:#2B1D14; --night:#2B1D14; --night-text:#F3E9DA; --glow:#C0542A;
  /* muted olive keeps existing "available/green" usages legible on cream */
  --moss:#5E7B4E; --moss-deep:#4C6640; --moss-soft:#E7E9DC; --leaf:#8AA07A;
  --full:#5E7B4E; --partial:#C0542A; --none:#B4492E; --unres:#9AA399;
  /* --- type --- */
  --font-display:"Playfair Display", Georgia, "Times New Roman", serif;
  --font-body:"Inter", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --font-mono:"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  /* --- shape & depth --- */
  --radius:14px; --radius-sm:10px; --radius-pill:999px;
  --shadow:0 1px 2px rgba(43,29,20,.06), 0 10px 30px rgba(43,29,20,.08);
  --shadow-sm:0 1px 2px rgba(43,29,20,.06);
}

/* ---- base typography ---------------------------------------------------- */
.haute, body.haute{ font-family:var(--font-body); color:var(--ink); background:var(--cream); }
.haute h1,.haute h2,.haute h3,.haute .display{
  font-family:var(--font-display); font-weight:700; line-height:1.1;
  letter-spacing:-.01em; color:var(--ink);
}
.haute h1{ font-size:clamp(2rem,4vw,3rem); }
.haute h2{ font-size:clamp(1.5rem,2.6vw,2rem); }
.haute h3{ font-size:1.2rem; }
.haute .display-italic{ font-style:italic; }

/* eyebrow: short gold rule + uppercase letter-spaced label above a title */
.eyebrow{
  display:inline-flex; align-items:center; gap:.55rem;
  font-family:var(--font-body); font-weight:600; font-size:.72rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--gold);
  margin-bottom:.6rem;
}
.eyebrow::before{ content:""; width:24px; height:2px; background:var(--gold); border-radius:2px; }

/* ---- buttons ------------------------------------------------------------ */
.btn{
  font-family:var(--font-body); font-weight:600; font-size:.92rem;
  border-radius:var(--radius-pill); padding:.7rem 1.25rem; border:1px solid transparent;
  cursor:pointer; text-decoration:none; display:inline-flex; align-items:center;
  gap:.4rem; transition:background .15s ease, color .15s ease, border-color .15s ease, transform .05s ease;
  line-height:1; white-space:nowrap;
}
.btn:active{ transform:translateY(1px); }
.btn-primary{ background:var(--clay); color:var(--paper); }
.btn-primary:hover{ background:var(--clay-deep); }
.btn-ghost{ background:transparent; color:var(--ink); border-color:var(--sage); }
.btn-ghost:hover{ border-color:var(--clay); color:var(--clay); }
.btn-dark{ background:var(--espresso); color:var(--night-text); }
.btn-dark:hover{ background:var(--espresso-2); }

/* ---- tags / pills ------------------------------------------------------- */
.pill{
  font-family:var(--font-body); font-size:.8rem; font-weight:500;
  border-radius:var(--radius-pill); padding:.4rem .85rem;
  background:var(--paper); border:1px solid var(--line); color:var(--ink);
}
.pill.active,.pill[aria-pressed="true"]{ background:var(--clay); color:var(--paper); border-color:var(--clay); }

/* ---- cards -------------------------------------------------------------- */
.card{
  background:var(--paper); border:1px solid var(--line);
  border-radius:var(--radius); padding:1.15rem 1.25rem; box-shadow:var(--shadow-sm);
}

/* ---- banded sections ---------------------------------------------------- */
.band-cream{ background:var(--cream); }
.band-cream-alt{ background:var(--cream-alt); }
.band-dark{
  background:var(--espresso); color:var(--night-text); position:relative; overflow:hidden;
}
.band-dark h1,.band-dark h2,.band-dark h3{ color:var(--night-text); }
.band-dark::before{
  content:""; position:absolute; top:-30%; left:50%; transform:translateX(-50%);
  width:80%; height:70%; pointer-events:none;
  background:radial-gradient(ellipse at center, color-mix(in srgb, var(--glow) 38%, transparent), transparent 70%);
}

/* ---- ghost numeral marker (only for real sequences) --------------------- */
.ghost-num{
  font-family:var(--font-display); font-weight:700; font-size:3.4rem;
  color:var(--gold); opacity:.32; line-height:1;
  -webkit-text-stroke:1px var(--gold); -webkit-text-fill-color:transparent;
}

/* ---- accessibility floor ------------------------------------------------ */
.haute a:not([class]){ color:var(--clay); }  /* bare content links only — never override button/nav anchor classes */
.haute :focus-visible{ outline:2px solid var(--clay); outline-offset:2px; }
@media (prefers-reduced-motion: reduce){
  .btn{ transition:none; }
}

/* ---- espresso "data surface" language (filters, columns, rows chrome) ----
   Modeled on the reference's dark section: ghosted glowing pills with a gold
   dot marker, a solid-terracotta active state, gold eyebrow labels, and
   espresso table headers with cream text. Row BODIES stay light for legible
   scanning; only the CHROME goes dark. */

/* a dark toolbar/band that wraps a filter row or a table header */
.esp-band{
  background:var(--espresso); color:var(--night-text);
  border:1px solid rgba(243,233,218,.10); border-radius:var(--radius);
  padding:.8rem 1rem; position:relative; overflow:hidden;
}
.esp-band .eyebrow{ color:var(--gold); }

/* ghost filter pill on espresso — translucent fill, warm border + glow, gold dot */
.esp-pill{
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:var(--font-body); font-size:.82rem; font-weight:500;
  color:var(--night-text); background:rgba(243,233,218,.05);
  border:1px solid rgba(185,138,62,.45); border-radius:var(--radius-pill);
  padding:.42rem .9rem; cursor:pointer;
  box-shadow:0 0 0 1px rgba(185,138,62,.10), 0 6px 18px rgba(0,0,0,.25);
  transition:border-color .15s, box-shadow .15s, background .15s;
}
.esp-pill::before{ content:""; width:7px; height:7px; border-radius:50%;
  background:var(--gold); box-shadow:0 0 8px rgba(185,138,62,.9); flex:0 0 auto; }
.esp-pill:hover{ border-color:rgba(185,138,62,.8);
  box-shadow:0 0 0 1px rgba(185,138,62,.25), 0 8px 22px rgba(0,0,0,.3); }
/* active/selected filter = solid terracotta with glow (the "results" state) */
.esp-pill.active,.esp-pill[aria-pressed="true"]{
  background:var(--clay); border-color:var(--clay); color:#fff;
  box-shadow:0 0 0 1px rgba(192,84,42,.5), 0 8px 22px rgba(192,84,42,.45);
}
.esp-pill.active::before,.esp-pill[aria-pressed="true"]::before{
  background:#fff; box-shadow:0 0 8px rgba(255,255,255,.8);
}

/* espresso table header row (columns) */
.esp-thead th, th.esp-th{
  background:var(--espresso); color:var(--night-text);
  font-family:var(--font-body); font-weight:600; font-size:.72rem;
  text-transform:uppercase; letter-spacing:.08em;
  border-bottom:1px solid rgba(243,233,218,.14); padding:.7rem .8rem; text-align:left;
}
.esp-thead th.sorted, th.esp-th.sorted{ box-shadow:inset 0 -2px 0 var(--clay); color:#fff; }

/* espresso panel card with an optional ghost numeral (grouped sections) */
.esp-panel{
  background:var(--espresso-2); color:var(--night-text);
  border:1px solid rgba(243,233,218,.10); border-radius:var(--radius);
  padding:1.15rem 1.25rem; position:relative;
}
.esp-panel .ghost-num{ position:absolute; top:.6rem; right:1rem; }