/* ========================================================
   Trend Co-Pilot · shared design tokens + base components
   Used by Dashboard / Auth / Persona Studio / Admin / Article
   Mirrors Home.html exactly so every page reads as one product.
======================================================== */

:root{
  --bg:        #FAF9F6;
  --bg-2:      #F2F0EA;
  --bg-card:   #FFFFFF;
  --bg-card-2: #F6F4EE;

  /* soft tints */
  --tint-lavender:  #EEE9FF;
  --tint-peach:     #FCEADB;
  --tint-mint:      #E2F1E7;
  --tint-sky:       #E1ECF6;
  --tint-rose:      #FCE5EA;
  --tint-butter:    #F8EFCB;
  --tint-sage:      #E9EFDF;
  --tint-lavender-ink: #5B47FF;
  --tint-peach-ink:    #C25B2A;
  --tint-mint-ink:     #1F7A4A;
  --tint-sky-ink:      #2A6BB0;
  --tint-rose-ink:     #B83352;
  --tint-butter-ink:   #97751C;

  --dark:       #0F0E13;
  --dark-2:     #15131A;
  --dark-card:  #1B1923;
  --dark-line:  rgba(255,255,255,0.08);
  --dark-line-2:rgba(255,255,255,0.14);

  --ink:        #0F0E13;
  --ink-soft:   rgba(15,14,19,0.66);
  --ink-mute:   rgba(15,14,19,0.46);
  --ink-dim:    rgba(15,14,19,0.26);

  --line:       rgba(15,14,19,0.10);
  --line-soft:  rgba(15,14,19,0.06);

  --accent:     #5B47FF;
  --accent-2:   #4A36E8;
  --accent-soft:rgba(91,71,255,0.10);
  --accent-line:rgba(91,71,255,0.24);

  --success:    #19A05E;
  --red:        #D33A2E;
  --warm:       #F0825A;

  --radius:     14px;
  --radius-lg:  20px;
  --radius-xl:  28px;
  --radius-sm:  9px;
  --maxw:       1320px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink)}
body{
  font-family:"Geist","Helvetica Neue",Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  font-feature-settings:"ss01","cv11";
  line-height:1.45;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:0;background:transparent;color:inherit}
img,svg{display:block;max-width:100%}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px;position:relative}
@media (max-width:640px){.wrap{padding:0 18px}}

/* ============ TYPOGRAPHY ============ */
.h-display{
  font-family:"Geist",sans-serif;font-weight:500;
  font-size:clamp(40px,5.6vw,80px);line-height:1.02;letter-spacing:-0.028em;
  text-wrap:balance;
}
.h-section{
  font-family:"Geist",sans-serif;font-weight:500;
  font-size:clamp(28px,3.8vw,46px);line-height:1.06;letter-spacing:-0.022em;
  text-wrap:balance;margin:0;
}
.h-card{
  font-family:"Geist",sans-serif;font-weight:500;
  font-size:22px;line-height:1.18;letter-spacing:-0.014em;margin:0;
}
.it{
  font-family:"Instrument Serif",serif;font-style:italic;font-weight:400;
  letter-spacing:-0.01em;
}
.it-accent{font-family:"Instrument Serif",serif;font-style:italic;color:var(--accent);font-weight:400}
.mono{font-family:"Geist Mono",ui-monospace,monospace}
.eyebrow{
  font-family:"Geist Mono",monospace;font-size:11px;letter-spacing:0.16em;
  text-transform:uppercase;color:var(--ink-mute);
}
.eyebrow .num{color:var(--accent)}

/* ============ BUTTONS ============ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  font-size:14px;font-weight:500;
  padding:10px 16px;border-radius:8px;
  transition:all .15s ease;white-space:nowrap;line-height:1;
}
.btn-primary{background:var(--ink);color:#fff}
.btn-primary:hover{background:var(--accent)}
.btn-accent{background:var(--accent);color:#fff;box-shadow:0 6px 18px -8px rgba(91,71,255,0.6)}
.btn-accent:hover{background:var(--accent-2);transform:translateY(-1px)}
.btn-line{background:var(--bg-card);color:var(--ink);border:1px solid var(--line)}
.btn-line:hover{background:var(--bg-2)}
.btn-ghost{color:var(--ink-soft)}
.btn-ghost:hover{color:var(--ink)}
.btn-on-dark{background:#fff;color:var(--ink)}
.btn-on-dark:hover{background:var(--accent);color:#fff}
.btn-line-dark{background:transparent;color:#fff;border:1px solid var(--dark-line-2)}
.btn-line-dark:hover{background:rgba(255,255,255,0.04)}
.btn-lg{padding:13px 20px;font-size:15px}
.btn-sm{padding:7px 12px;font-size:12.5px}
.btn-arrow{transition:transform .2s}
.btn:hover .btn-arrow{transform:translateX(2px)}

/* ============ TOP NAV (app-wide) ============ */
.appbar{
  position:sticky;top:0;z-index:50;
  background:rgba(250,249,246,0.86);
  backdrop-filter:blur(16px) saturate(160%);
  -webkit-backdrop-filter:blur(16px) saturate(160%);
  border-bottom:1px solid var(--line-soft);
}
.appbar-inner{
  display:flex;align-items:center;justify-content:space-between;
  gap:18px;height:64px;
}
.brand{display:flex;align-items:center;gap:14px}
.logo{display:flex;align-items:center;gap:9px;font-weight:600;font-size:15.5px;letter-spacing:-0.012em}
.logo-mark{
  width:26px;height:26px;border-radius:7px;
  background:var(--ink);color:#fff;
  display:grid;place-items:center;
  font-family:"Instrument Serif",serif;font-style:italic;font-size:16px;line-height:1;
  padding-bottom:2px;
}
.brand-tag{
  font-family:"Geist Mono",monospace;font-size:10.5px;letter-spacing:0.14em;text-transform:uppercase;
  padding:4px 9px;border-radius:5px;background:var(--accent-soft);color:var(--accent);
}
.appbar-right{display:flex;align-items:center;gap:8px}
.user-pill{
  display:inline-flex;align-items:center;gap:8px;
  padding:5px 12px 5px 10px;
  border:1px solid var(--line);border-radius:999px;
  font-size:13px;color:var(--ink-soft);
  background:var(--bg-card);
}
.user-pill .dot{
  width:6px;height:6px;border-radius:50%;background:var(--success);
  box-shadow:0 0 0 3px rgba(25,160,94,0.16);
}
.appbar-links{display:flex;gap:4px;align-items:center}
.appbar-links a{
  font-size:13.5px;color:var(--ink-soft);
  padding:6px 12px;border-radius:7px;
  transition:all .15s;
}
.appbar-links a:hover{color:var(--ink);background:var(--bg-2)}
.appbar-links a.active{
  background:var(--accent-soft);color:var(--accent);font-weight:500;
}

@media (max-width:780px){
  .appbar-links{display:none}
  .user-pill .email{display:none}
  .brand-tag{display:none}
}

/* ============ CARD ============ */
.card{
  background:var(--bg-card);border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:24px;
}
.card.dark{background:var(--dark);color:#fff;border-color:var(--dark-line)}
.card.tinted{background:var(--bg-card-2)}
.card.lavender{background:var(--tint-lavender);border-color:transparent}
.card.peach{background:var(--tint-peach);border-color:transparent}
.card.mint{background:var(--tint-mint);border-color:transparent}
.card.sky{background:var(--tint-sky);border-color:transparent}
.card.rose{background:var(--tint-rose);border-color:transparent}
.card.butter{background:var(--tint-butter);border-color:transparent}

/* ============ FORMS ============ */
.field{margin-bottom:16px}
.field-label{
  display:block;font-size:13.5px;font-weight:500;
  margin-bottom:6px;color:var(--ink);
}
.field-label .opt{color:var(--ink-mute);font-weight:400;font-size:12.5px;margin-left:6px}
.input,
.select,
.textarea{
  width:100%;
  padding:11px 14px;
  background:var(--bg-card);
  border:1px solid var(--line);
  border-radius:9px;
  font-family:inherit;font-size:14.5px;color:var(--ink);
  transition:border-color .15s, box-shadow .15s;
  outline:none;
}
.input:focus,
.select:focus,
.textarea:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 4px rgba(91,71,255,0.10);
}
.input::placeholder,
.textarea::placeholder{color:var(--ink-mute)}
.textarea{min-height:90px;resize:vertical;line-height:1.5}
.select{
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'><path d='M1 1l4 4 4-4' stroke='%2315131A' stroke-width='1.4' stroke-linecap='round'/></svg>");
  background-repeat:no-repeat;background-position:right 14px center;padding-right:34px;
}
.field-help{font-size:12.5px;color:var(--ink-mute);margin-top:6px;line-height:1.5}
.field-error{font-size:12.5px;color:var(--red);margin-top:6px}

/* ============ TAGS / CHIPS ============ */
.tag{
  display:inline-flex;align-items:center;gap:4px;
  font-family:"Geist Mono",monospace;font-size:10.5px;letter-spacing:0.04em;
  padding:3px 8px;border-radius:5px;
  background:var(--bg-2);color:var(--ink-soft);
}
.tag.violet{background:var(--accent-soft);color:var(--accent)}
.tag.mint{background:rgba(25,160,94,0.12);color:var(--success)}
.tag.peach{background:rgba(194,91,42,0.10);color:var(--tint-peach-ink)}
.tag.sky{background:rgba(42,107,176,0.10);color:var(--tint-sky-ink)}
.tag.rose{background:rgba(184,51,82,0.10);color:var(--tint-rose-ink)}
.tag.butter{background:rgba(151,117,28,0.12);color:var(--tint-butter-ink)}
.tag.red{background:rgba(211,58,46,0.10);color:var(--red);text-decoration:line-through}
.tag.dark{background:var(--ink);color:#fff}

/* ============ PILLS / BADGES ============ */
.live{
  display:inline-flex;align-items:center;gap:7px;
  font-family:"Geist Mono",monospace;font-size:10.5px;letter-spacing:0.14em;
  text-transform:uppercase;color:var(--success);
  padding:4px 10px;border-radius:999px;
  background:rgba(25,160,94,0.08);
}
.live .dot{
  width:6px;height:6px;border-radius:50%;background:var(--success);
  animation:pulse 1.6s ease-in-out infinite;
}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}

/* ============ APP NAV CROSS-LINKS (so the user can hop around the prototype) ============ */
.proto-strip{
  display:flex;gap:6px;flex-wrap:wrap;
  padding:9px 0;
  border-bottom:1px solid var(--line-soft);
  background:var(--bg);
  font-family:"Geist Mono",monospace;font-size:11px;letter-spacing:0.10em;text-transform:uppercase;
  color:var(--ink-mute);
}
.proto-strip .label{margin-right:6px;align-self:center}
.proto-strip a{
  padding:5px 11px;border-radius:6px;transition:all .15s;
}
.proto-strip a:hover{background:var(--bg-2);color:var(--ink)}
.proto-strip a.active{background:var(--ink);color:#fff}

/* reduce-motion */
@media (prefers-reduced-motion: reduce){
  *{animation-duration:0s !important;transition:none !important}
}