/* =====================================================================
   PRIMUS DESIGN SYSTEM v1 — Single source of truth for PRIMUS AI surfaces
   Hosted at: https://primus-ai.pages.dev/css/primus-system.css
   Loaded by: primus-ai pages, mlo-asistant, commercial-deal-evaluator,
              offer-lab, commission-tool, listing-level-up, marketing-hub,
              market-snapshot, commercial-deal-analyzer
   ===================================================================== */

@property --primus-angle { syntax:'<angle>'; initial-value:130deg; inherits:false; }

/* ------------------------------------------------------------------ */
/*  TOKENS — Color, typography, motion, depth, geometry                */
/* ------------------------------------------------------------------ */
:root{
  /* === Surface scale === */
  --primus-bg-0:#040406;
  --primus-bg-1:#08080b;
  --primus-bg-2:#0c0c11;
  --primus-bg-3:#10101a;
  --primus-bg-4:#14141d;

  /* === Gold ladder === */
  --primus-gold-1:#f5dba8;
  --primus-gold-2:#d4a865;
  --primus-gold-3:#a8804a;
  --primus-gold-bright:#fde8a0;
  --primus-gold-deep:#7a5a30;

  --primus-gold-line:rgba(212,168,101,.22);
  --primus-gold-line-strong:rgba(212,168,101,.45);
  --primus-gold-line-bright:rgba(240,201,106,.7);
  --primus-gold-glow:rgba(212,168,101,.16);
  --primus-gold-glow-mid:rgba(240,201,106,.32);
  --primus-gold-glow-strong:rgba(240,201,106,.55);

  /* === Text ladder === */
  --primus-text:#ececed;
  --primus-text-soft:rgba(236,236,237,.78);
  --primus-text-muted:rgba(236,236,237,.52);
  --primus-text-faint:rgba(236,236,237,.32);
  --primus-text-ghost:rgba(236,236,237,.20);

  /* === Semantic === */
  --primus-success:#7fc99a;
  --primus-warn:#e8b964;
  --primus-error:#e08a7a;

  /* === Surfaces (translucent) === */
  --primus-surface-1:rgba(255,255,255,.018);
  --primus-surface-2:rgba(255,255,255,.030);
  --primus-surface-3:rgba(255,255,255,.045);

  /* === Gradients === */
  --primus-gold-gradient:linear-gradient(180deg,var(--primus-gold-1) 0%,var(--primus-gold-2) 60%,var(--primus-gold-3) 100%);
  --primus-gold-gradient-hero:linear-gradient(135deg,#f0c96a 0%,var(--primus-gold-bright) 50%,#d4952a 100%);
  --primus-gold-gradient-text:linear-gradient(180deg,rgba(255,255,255,.96) 0%,var(--primus-gold-1) 45%,var(--primus-gold-3) 90%);
  --primus-page-bg:radial-gradient(900px 480px at 12% -5%,rgba(212,168,101,.07),transparent 55%),radial-gradient(700px 400px at 95% 8%,rgba(212,168,101,.035),transparent 60%),radial-gradient(1200px 700px at 50% 110%,rgba(212,168,101,.025),transparent 60%),linear-gradient(180deg,var(--primus-bg-1) 0%,var(--primus-bg-0) 100%);

  /* === Conic ring (for traveling neon) === */
  --primus-ring-conic:conic-gradient(from var(--primus-angle),transparent 0%,transparent 55%,rgba(192,122,24,.4) 65%,var(--primus-gold-line-bright) 73%,rgba(253,232,160,1) 78%,var(--primus-gold-line-bright) 83%,rgba(192,122,24,.4) 91%,transparent 97%,transparent 100%);

  /* === Typography === */
  --primus-font-display:'Playfair Display',Georgia,serif;
  --primus-font-body:'Inter',ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,sans-serif;
  --primus-font-serif:'Cormorant Garamond','Playfair Display',Georgia,serif;
  --primus-font-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  --primus-tracking-tight:-.01em;
  --primus-tracking-normal:0;
  --primus-tracking-wide:.05em;
  --primus-tracking-wider:.18em;
  --primus-tracking-widest:.32em;

  /* === Easing === */
  --primus-ease:cubic-bezier(.22,.61,.36,1);          /* primary, "ease out exp"-ish */
  --primus-ease-tactile:cubic-bezier(.16,.84,.24,1);  /* buttons, cards */
  --primus-ease-spring:cubic-bezier(.34,1.56,.64,1);  /* delight pulses */
  --primus-ease-cinema:cubic-bezier(.65,0,.35,1);     /* slow reveals */

  /* === Duration === */
  --primus-dur-quick:.18s;
  --primus-dur-base:.25s;
  --primus-dur-slow:.45s;
  --primus-dur-cinema:.75s;

  /* === Shadows === */
  --primus-shadow-sm:0 1px 0 rgba(255,255,255,.04),0 8px 16px rgba(0,0,0,.2);
  --primus-shadow-md:0 1px 0 rgba(255,255,255,.05),0 18px 40px rgba(0,0,0,.35);
  --primus-shadow-lg:0 1px 0 rgba(255,255,255,.06),0 30px 80px rgba(0,0,0,.55);
  --primus-shadow-xl:0 2px 0 rgba(255,255,255,.07),0 48px 120px rgba(0,0,0,.7);
  --primus-shadow-gold-sm:0 8px 24px -12px rgba(212,149,42,.45);
  --primus-shadow-gold-md:0 16px 48px -16px rgba(212,149,42,.5);
  --primus-shadow-gold-lg:0 24px 80px -24px rgba(212,149,42,.55);
  --primus-shadow-inset:inset 0 1px 0 rgba(255,255,255,.05),inset 0 -1px 0 rgba(0,0,0,.45);

  /* === Geometry === */
  --primus-radius-sm:8px;
  --primus-radius-md:14px;
  --primus-radius-lg:18px;
  --primus-radius-xl:26px;
  --primus-radius-pill:999px;

  /* === Spacing === */
  --primus-space-1:4px;  --primus-space-2:8px;  --primus-space-3:12px;
  --primus-space-4:16px; --primus-space-5:20px; --primus-space-6:24px;
  --primus-space-8:32px; --primus-space-10:40px; --primus-space-12:48px;
  --primus-space-16:64px; --primus-space-20:80px;
}

/* ------------------------------------------------------------------ */
/*  LEGACY ALIASES — keep existing tool CSS working without rewrites   */
/* ------------------------------------------------------------------ */
:root{
  /* Workers (mlo-asistant, commercial, offer-lab, etc.) */
  --bg-0:var(--primus-bg-0); --bg-1:var(--primus-bg-1);
  --bg-2:var(--primus-bg-2); --bg-3:var(--primus-bg-3);
  --gold-1:var(--primus-gold-1); --gold-2:var(--primus-gold-2); --gold-3:var(--primus-gold-3);
  --gold-glow:var(--primus-gold-glow);
  --text:var(--primus-text); --text-soft:var(--primus-text-soft);
  --text-muted:var(--primus-text-muted); --text-faint:var(--primus-text-faint);
  --surface-1:var(--primus-surface-1); --surface-2:var(--primus-surface-2); --surface-3:var(--primus-surface-3);
  --shadow-soft:var(--primus-shadow-sm);
  --shadow-md:var(--primus-shadow-md);
  --shadow-lg:var(--primus-shadow-lg);
  --inset:var(--primus-shadow-inset);
  --mono:var(--primus-font-mono);
  --ease-out:var(--primus-ease);
  --ease-tactile:var(--primus-ease-tactile);
  --ease-spring:var(--primus-ease-spring);
}

/* ------------------------------------------------------------------ */
/*  KEYFRAMES — Shared motion vocabulary                               */
/* ------------------------------------------------------------------ */
@keyframes primus-spin{ to{ --primus-angle:490deg } }
@keyframes primus-glow{ 0%,100%{opacity:.55} 50%{opacity:1} }
@keyframes primus-fade-up{ from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:translateY(0)} }
@keyframes primus-fade-in{ from{opacity:0} to{opacity:1} }
@keyframes primus-shimmer{ from{background-position:-1000px 0} to{background-position:1000px 0} }
@keyframes primus-breath{ 0%,100%{transform:scale(1)} 50%{transform:scale(1.025)} }
@keyframes primus-pulse-ring{ 0%{transform:scale(.8);opacity:1} 100%{transform:scale(1.4);opacity:0} }

/* ------------------------------------------------------------------ */
/*  REUSABLE COMPONENTS — Opt-in via .primus-* classes                 */
/* ------------------------------------------------------------------ */

/* Page baseline (apply on <body> when desired) */
.primus-page{
  background:var(--primus-page-bg);
  background-attachment:fixed;
  color:var(--primus-text);
  font-family:var(--primus-font-body);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Hero title gradient text */
.primus-h1{
  font-family:var(--primus-font-display);
  font-style:italic; font-weight:700;
  font-size:clamp(38px,5.5vw,60px);
  line-height:1.04; letter-spacing:.005em; margin:0;
  background:var(--primus-gold-gradient-text);
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
  text-shadow:0 0 60px var(--primus-gold-glow);
}
.primus-gold-text{
  background:var(--primus-gold-gradient);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* Brand chip / kicker */
.primus-kicker{
  font-family:var(--primus-font-mono);
  font-size:10px; letter-spacing:var(--primus-tracking-widest);
  text-transform:uppercase; font-weight:600;
  color:var(--primus-gold-2); opacity:.95;
}

/* Glass card */
.primus-card{
  position:relative;
  border-radius:var(--primus-radius-lg);
  padding:var(--primus-space-6);
  background:radial-gradient(720px 280px at 12% 0%,rgba(212,168,101,.10),transparent 62%),linear-gradient(180deg,rgba(20,20,26,.98),rgba(10,10,14,.96));
  box-shadow:inset 0 0 0 1px var(--primus-gold-line),inset 0 1px 0 rgba(255,255,255,.06),var(--primus-shadow-md);
  transition:transform var(--primus-dur-slow) var(--primus-ease-tactile),box-shadow var(--primus-dur-slow) var(--primus-ease-tactile);
}
.primus-card:hover{
  transform:translateY(-3px);
  box-shadow:inset 0 0 0 1px var(--primus-gold-line-strong),inset 0 1px 0 rgba(255,255,255,.06),var(--primus-shadow-lg),0 0 60px var(--primus-gold-glow);
}

/* Pill button (primary) */
.primus-btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:11px 22px;
  font-family:var(--primus-font-mono);
  font-size:11px; letter-spacing:var(--primus-tracking-wider); text-transform:uppercase;
  color:var(--primus-gold-1); text-decoration:none;
  background:linear-gradient(135deg,rgba(28,22,12,.92),rgba(14,12,8,.92));
  border:1px solid var(--primus-gold-line-strong);
  border-radius:var(--primus-radius-pill);
  cursor:pointer;
  transition:all var(--primus-dur-base) var(--primus-ease-tactile);
  box-shadow:0 0 0 1px rgba(240,201,106,.06) inset,var(--primus-shadow-gold-sm);
}
.primus-btn:hover{
  color:#fff5d6;
  border-color:var(--primus-gold-line-bright);
  transform:translateY(-1px);
  box-shadow:0 0 0 1px rgba(240,201,106,.12) inset,var(--primus-shadow-gold-md),0 0 24px -4px var(--primus-gold-glow-mid);
}
.primus-btn:active{ transform:translateY(0) }

/* Pill badge */
.primus-badge{
  display:inline-flex; align-items:center;
  padding:5px 10px; border-radius:var(--primus-radius-pill);
  font-family:var(--primus-font-mono);
  font-weight:600; font-size:9px; letter-spacing:var(--primus-tracking-wider); text-transform:uppercase;
  color:var(--primus-gold-2);
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(0,0,0,.18));
  box-shadow:inset 0 0 0 1px var(--primus-gold-line),var(--primus-shadow-inset);
}

/* Traveling neon ring (wraps a circular logo) */
.primus-neon-ring{
  position:relative;
  border-radius:50%;
  padding:2px;
  background:var(--primus-ring-conic);
  animation:primus-spin 2.8s linear infinite;
}
.primus-neon-ring > *{
  display:block; width:100%; height:100%;
  border-radius:50%;
  background:radial-gradient(circle at 40% 35%,rgba(18,16,12,1) 0%,rgba(8,8,10,1) 100%);
}

/* Hairline divider */
.primus-hairline{
  height:1px; width:100%;
  background:linear-gradient(90deg,transparent 0%,var(--primus-gold-line) 30%,var(--primus-gold-line-strong) 50%,var(--primus-gold-line) 70%,transparent 100%);
}

/* Loader (3-ring) */
.primus-loader{
  width:62px; height:62px; position:relative; display:inline-block;
}
.primus-loader span{
  position:absolute; inset:0; border-radius:50%;
  border:1px solid transparent; border-top-color:var(--primus-gold-1);
  animation:primus-spin 1.4s linear infinite;
}
.primus-loader span:nth-child(2){ inset:8px; border-top-color:var(--primus-gold-bright); animation-duration:1.8s; animation-direction:reverse }
.primus-loader span:nth-child(3){ inset:16px; border-top-color:var(--primus-gold-2); animation-duration:2.2s }

/* Shimmer placeholder */
.primus-shimmer{
  background:linear-gradient(90deg,transparent 0%,rgba(240,201,106,.06) 50%,transparent 100%);
  background-size:1000px 100%;
  animation:primus-shimmer 2.4s linear infinite;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *,
  .primus-card,
  .primus-btn,
  .primus-neon-ring,
  .primus-loader span,
  .primus-shimmer{
    transition-duration:.01ms !important;
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
  }
}