/* ============================================================
   Privé — Northern Lights design tokens (DARK, brand source of truth).
   Shared by the creator Mini App (public/app/) and the SSR pages (page()).
   Mirrors the "Privé Design System" project on claude.ai/design.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:opsz,wght@8..60,400;8..60,500;8..60,600;8..60,700&family=Plus+Jakarta+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  color-scheme: dark;

  /* ---- Base palette ---- */
  --prive-bg:          #1a1d23;
  --prive-surface:     #2f3436;
  --prive-surface-2:   #363c3e;
  --prive-border:      #444444;
  --prive-border-soft: #3a3f41;
  --prive-text:        #e5e5e5;
  --prive-text-muted:  #a3a3a3;
  --prive-text-faint:  #6f7173;

  /* Aurora accents */
  --prive-green:        #34a85a;
  --prive-green-hover:  #2d9550;
  --prive-green-soft:   rgba(52,168,90,0.16);
  --prive-green-glow:   rgba(52,168,90,0.35);
  --prive-blue:         #4682b4;
  --prive-blue-hover:   #3d7299;
  --prive-blue-soft:    rgba(70,130,180,0.16);
  --prive-cornflower:   #6495ed;
  --prive-cornflower-soft: rgba(100,149,237,0.16);
  --prive-cornflower-glow: rgba(100,149,237,0.30);

  /* Status */
  --prive-warning: #d9a441;
  --prive-danger:  #d96a5a;
  --prive-on-accent: #ffffff;

  /* ---- Fonts ---- */
  --font-display: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --font-body:    'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace;

  /* ---- Radius ---- */
  --radius-sm: 6px;
  --radius:    8px;
  --radius-md: 10px;
  --radius-lg: 14px;   /* cards */
  --radius-xl: 20px;   /* feature panels */
  --radius-full: 999px;

  /* ---- Shadows (subtle on dark) ---- */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.30);
  --shadow:    0 2px 8px rgba(0,0,0,0.35);
  --shadow-md: 0 6px 20px rgba(0,0,0,0.40);
  --shadow-lg: 0 16px 48px rgba(0,0,0,0.50);
  --glow-green:      0 0 26px var(--prive-green-glow);
  --glow-cornflower: 0 0 26px var(--prive-cornflower-glow);

  /* ---- Semantic aliases (consumed by component classes) ---- */
  --bg:       var(--prive-bg);
  --card:     var(--prive-surface);
  --raised:   var(--prive-surface-2);
  --line:     var(--prive-border);
  --line-soft:var(--prive-border-soft);
  --ink:      var(--prive-text);
  --heading:  var(--prive-text);
  --muted:    var(--prive-text-muted);
  --soft:     var(--prive-text-muted);
  --faint:    var(--prive-text-faint);
  --brand:    var(--prive-green);
  --brand-hover: var(--prive-green-hover);
  --accent:   var(--prive-green);
  --steel:    var(--prive-blue);

  /* Status + soft fills (chips, tags, tinted buttons) */
  --ok:        var(--prive-green);
  --amber:     var(--prive-warning);
  --clay:      var(--prive-danger);
  --ok-soft:   var(--prive-green-soft);
  --amber-soft:rgba(217,164,65,0.16);
  --clay-soft: rgba(217,106,90,0.16);
  --brand-soft:var(--prive-green-soft);
  --track:     rgba(0,0,0,0.25);  /* segmented-nav track */
}

/* Aurora glow backdrop — green + cornflower radial wash behind a hero block. */
.aurora { position: relative; isolation: isolate; }
.aurora::before,
.aurora::after {
  content: "";
  position: absolute;
  z-index: -1;
  border-radius: var(--radius-full);
  filter: blur(44px);
  pointer-events: none;
  opacity: 0.9;
}
.aurora::before {
  width: 420px; height: 300px; left: -120px; top: -120px;
  background: radial-gradient(closest-side, var(--prive-green-glow), transparent);
}
.aurora::after {
  width: 360px; height: 260px; right: -120px; top: -70px;
  background: radial-gradient(closest-side, var(--prive-cornflower-glow), transparent);
}