/* ─────────────────────────────────────────────────────────────
   Avlana Client Hub — brand tokens
   This file IS the "skin". Swap it (+ hub-model.js) → new client hub.
   Current skin: CARMEN JENNY — clean minimal, one pop of pink (her doc §4:
   "pink as a signature, colorful and a little neon at heart, balanced
   against clean minimalism"). Her real brand fonts/pink are not set yet;
   swap the families + --brand-2 once she names them.
   ───────────────────────────────────────────────────────────── */
@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:        #D0126C;   /* pink, deepened so text + buttons pass contrast on paper */
  --brand-2:      #FF2F8E;   /* the neon pop — dots, ticks, accents, never body text */
  --brand-soft:   #FF9CC8;
  --brand-wash:   #FFF0F6;   /* pink tint fill */
  --ink:          #141214;   /* headlines */
  --grey:         #5C585B;   /* body */
  --grey-light:   #9C979A;   /* meta */
  --paper:        #FAFAF8;   /* page bg */
  --card:         #FFFFFF;   /* surface */
  --line:         #EEEAEC;   /* hairlines */
  --line-2:       #E4DFE2;
  --ok:           #1FA971;   /* ready / posted */
  --warn:         #E08A1F;   /* in review */
  --live:         #D0126C;   /* in flight */

  /* ── type (client-swappable families) ── */
  --sans: "Inter", system-ui, -apple-system, sans-serif;   /* her general text (picked 2026-09-25) */
  --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(20,18,20,.04), 0 8px 24px rgba(208,18,108,.05);
  --shadow-lg: 0 2px 8px rgba(20,18,20,.06), 0 24px 60px rgba(208,18,108,.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; }