/* ─────────────────────────────────────────────────────────────
   Avlana Client Hub — brand tokens
   This file IS the "skin". Swap it (+ hub-data.js) → new client hub.
   Current skin: NEUROPRENEUR / Mona Ghazi  (indigo on paper, light)
   ───────────────────────────────────────────────────────────── */
@font-face {
  font-family: "MonaHand";
  src: url("./Mona_ghazi-Regular.ttf") format("truetype");
  font-display: swap;
}
@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500&display=swap");

:root {
  /* ── palette (client-swappable) ── */
  --brand:        #2C15BA;   /* indigo — primary */
  --brand-2:      #6959CF;   /* violet */
  --brand-soft:   #A299DD;   /* lavender */
  --brand-wash:   #F3F1FC;   /* indigo tint fill */
  --ink:          #0E0D1A;   /* headlines */
  --grey:         #5E5E67;   /* body */
  --grey-light:   #9F9FA4;   /* meta */
  --paper:        #FAFAFA;   /* page bg */
  --card:         #FFFFFF;   /* surface */
  --line:         #ECE9F6;   /* hairlines */
  --line-2:       #E3E0EE;
  --ok:           #1FA971;   /* ready / posted */
  --warn:         #E08A1F;   /* in review */
  --live:         #2C15BA;   /* in flight */

  /* ── type (client-swappable families) ── */
  --sans: "Poppins", system-ui, -apple-system, sans-serif;
  --hand: "MonaHand", "Poppins", cursive;

  /* ── shape / motion ── */
  --r-sm: 10px; --r: 16px; --r-lg: 24px; --r-xl: 32px;
  --shadow: 0 1px 2px rgba(14,13,26,.04), 0 8px 24px rgba(44,21,186,.06);
  --shadow-lg: 0 2px 8px rgba(14,13,26,.06), 0 24px 60px rgba(44,21,186,.12);
  --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); 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; }