/* ─────────────────────────────────────────────────────────────
   Avlana Client Hub — brand tokens
   This file IS the "skin". Swap it (+ hub-model.js) → new client hub.
   Current skin: MATTHIAS ROSSINI (own personal brand). From his Visual
   Identity page: warm neutrals (cream, sand, soft brown), muted terracotta
   accent, "a specialty coffee shop at 9am". No neon, no pure black.
   ───────────────────────────────────────────────────────────── */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Instrument+Serif:ital@0;1&display=swap");

:root {
  /* ── palette (client-swappable) ── */
  --brand:        #9C4A2C;   /* terracotta, deepened so text + buttons pass contrast on cream */
  --brand-2:      #C0663F;   /* muted terracotta — dots, ticks, accents, never body text */
  --brand-soft:   #E2BB9F;
  --brand-wash:   #F5E9DE;   /* terracotta tint fill */
  --ink:          #231D18;   /* headlines: warm near-black, never pure black */
  --grey:         #5E554C;   /* body */
  --grey-light:   #9A9087;   /* meta */
  --paper:        #F7F3EC;   /* cream page bg */
  --card:         #FFFDF9;   /* surface */
  --line:         #ECE4D8;   /* hairlines */
  --line-2:       #E0D6C7;
  --ok:           #5B7042;   /* ready / posted (deep olive) */
  --warn:         #B4893C;   /* in review (aged brass) */
  --live:         #9C4A2C;   /* in flight */

  /* ── type (client-swappable families) ── */
  --sans: "Inter", system-ui, -apple-system, sans-serif;
  --hand: "Instrument Serif", Georgia, serif;   /* accent role: one italic word, never body */

  /* ── shape / motion ── */
  --r-sm: 10px; --r: 16px; --r-lg: 24px; --r-xl: 32px;
  --shadow: 0 1px 2px rgba(35,29,24,.04), 0 8px 24px rgba(156,74,44,.05);
  --shadow-lg: 0 2px 8px rgba(35,29,24,.06), 0 24px 60px rgba(156,74,44,.10);
  --ease: cubic-bezier(.4,.14,.3,1);
  --maxw: 1120px;
}
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body { background: var(--paper); color: var(--ink); font-family: var(--sans); line-height: 1.5; }
a { color: inherit; text-decoration: none; }

/* shared primitives directions may use */
.hand { font-family: var(--hand); font-style: italic; color: var(--brand); font-weight: 400; }
.eyebrow { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--grey-light); font-weight: 600; }
.pill { display: inline-flex; align-items: center; gap: .4em; font-size: .74rem; font-weight: 600;
        padding: .28em .7em; border-radius: 999px; background: var(--brand-wash); color: var(--brand); }
.dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; display: inline-block; }
.status-ready  { color: var(--ok); }
.status-review { color: var(--warn); }
.status-live   { color: var(--live); }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); }

@keyframes riseIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.animate-in { animation: riseIn .6s var(--ease) both; }