/* ============================================================
   CornerStone Design System  ·  SPN Solutions
   Futuristic, branded visual language for the app + templates.
   ============================================================ */

:root {
  /* --- Core palette: deep space + electric accents --- */
  --cs-bg-0:   #060912;   /* deepest background */
  --cs-bg-1:   #0a0f1e;   /* page background */
  --cs-bg-2:   #0f1628;   /* panel base */
  --cs-bg-3:   #16203a;   /* raised panel */

  --cs-ink:    #eaf0ff;   /* primary text */
  --cs-ink-2:  #9fb0d0;   /* secondary text */
  --cs-ink-3:  #62739a;   /* muted text */

  /* SPN accent spectrum */
  --cs-cyan:   #2ee6e0;
  --cs-blue:   #3b82f6;
  --cs-indigo: #6366f1;
  --cs-violet: #a855f7;
  --cs-gold:   #f5c45e;   /* the "cornerstone" / scripture warmth */

  --cs-good:   #34d399;
  --cs-warn:   #fbbf24;
  --cs-bad:    #fb7185;

  /* Gradients */
  --cs-grad-primary: linear-gradient(120deg, var(--cs-cyan), var(--cs-indigo) 55%, var(--cs-violet));
  --cs-grad-soft:    linear-gradient(135deg, rgba(46,230,224,.18), rgba(99,102,241,.14) 60%, rgba(168,85,247,.16));
  --cs-grad-gold:    linear-gradient(120deg, var(--cs-gold), #ff9d5c);

  /* Glass surfaces */
  --cs-glass:        rgba(255,255,255,0.04);
  --cs-glass-2:      rgba(255,255,255,0.06);
  --cs-border:       rgba(255,255,255,0.09);
  --cs-border-glow:  rgba(110,160,255,0.35);

  /* Effects */
  --cs-shadow:   0 18px 50px -20px rgba(0,0,0,.8);
  --cs-glow:     0 0 28px rgba(99,102,241,.35);
  --cs-radius:   18px;
  --cs-radius-sm: 12px;

  /* Type */
  --cs-font-display: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  --cs-font-body:    "Inter", "Segoe UI", system-ui, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--cs-font-body);
  color: var(--cs-ink);
  background:
    radial-gradient(1100px 700px at 12% -8%, rgba(46,230,224,.12), transparent 55%),
    radial-gradient(1000px 720px at 92% 4%, rgba(168,85,247,.14), transparent 55%),
    radial-gradient(900px 600px at 50% 120%, rgba(59,130,246,.12), transparent 55%),
    var(--cs-bg-1);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
}

h1,h2,h3,h4 { font-family: var(--cs-font-display); font-weight: 600; letter-spacing:-.01em; margin:0; }

/* --- Utility surfaces --- */
.cs-glass {
  background: var(--cs-glass);
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-radius);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--cs-shadow);
}

.cs-grad-text {
  background: var(--cs-grad-primary);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.cs-pill {
  display:inline-flex; align-items:center; gap:.4em;
  font-size:.72rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase;
  padding:.32em .7em; border-radius:999px;
  border:1px solid var(--cs-border); color:var(--cs-ink-2);
  background: var(--cs-glass-2);
}
.cs-pill.is-phase1 { color:var(--cs-cyan);  border-color:rgba(46,230,224,.4); }
.cs-pill.is-phase2 { color:var(--cs-indigo);border-color:rgba(99,102,241,.4); }
.cs-pill.is-phase3 { color:var(--cs-violet);border-color:rgba(168,85,247,.4); }

/* Animated accent hairline */
.cs-rule {
  height:1px; border:0;
  background: linear-gradient(90deg, transparent, var(--cs-border-glow), transparent);
}

/* Buttons */
.cs-btn {
  font-family:var(--cs-font-display); font-weight:600; font-size:.9rem;
  padding:.7em 1.3em; border-radius:999px; cursor:pointer;
  color:#04121a; border:0;
  background: var(--cs-grad-primary);
  box-shadow: var(--cs-glow);
  transition: transform .15s ease, box-shadow .2s ease;
}
.cs-btn:hover { transform: translateY(-2px); box-shadow: 0 0 36px rgba(99,102,241,.55); }
.cs-btn--ghost {
  background: var(--cs-glass-2); color:var(--cs-ink); border:1px solid var(--cs-border);
  box-shadow:none;
}

/* Card hover used across the app */
.cs-card { transition: transform .18s ease, border-color .2s ease, box-shadow .2s ease; }
.cs-card:hover { transform: translateY(-4px); border-color: var(--cs-border-glow); box-shadow: var(--cs-glow); }