/* Founder Studio design tokens — the single source of truth for every surface.
   Structure follows the Catalyst system: a surface ladder rather than flat
   panels, borders as low-opacity white rather than grey hex, a fixed type and
   spacing scale, a two-part shadow ladder, and named motion.

   The nine names the existing pages already use (--bg, --panel, --line, --ink,
   --mute, --seal, --rec, --accent, --gold) are kept as aliases at the bottom so
   this file can be adopted without touching the rules that reference them. */

:root {
  /* ---- surfaces: near-black with a hint of blue, never pure #000 ---- */
  --bg:        #080a14;
  --surface:   #131c30;
  --surface-2: #1d2842;
  --elev:      #243152;

  /* ---- borders: low-opacity white reads crisp on dark; grey hex disappears ---- */
  --border:        rgba(255,255,255,.10);
  --border-strong: rgba(255,255,255,.14);
  --border-focus:  rgba(129,158,255,.55);

  /* ---- text ---- */
  --text:  #e9eefb;
  --dim:   #93a0bd;
  --faint: #5f6b86;

  /* ---- accent: one family, used sparingly ---- */
  --accent:       #5b8cff;
  --accent-2:     #a8c0ff;
  --accent-press: #3f6fe0;
  --accent-wash:  rgba(91,140,255,.12);

  /* ---- the primary call to action. One token: change it here, everywhere follows. ---- */
  --cta:       #19c37d;
  --cta-press: #14a468;
  --cta-ink:   #04140c;

  /* ---- semantic only, never decorative ---- */
  --rec:    #ff4d4d;   /* recording / live-on-air */
  --live:   #19c37d;   /* connected, healthy */
  --warn:   #ffd166;   /* degraded, partial */
  --danger: #ef4444;   /* failed, destructive */
  --info:   #5b8cff;

  /* ---- type: one UI face, one mono ---- */
  --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Inter, Roboto, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --fs-11: 11px; --fs-12: 12px; --fs-13: 13px; --fs-14: 14px;
  --fs-16: 16px; --fs-20: 20px; --fs-28: 28px; --fs-40: 40px;

  /* ---- spacing: 4px base ---- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-12: 48px; --s-16: 64px;

  /* ---- shape ---- */
  --r-sm: 8px; --r: 10px; --r-lg: 14px; --r-xl: 18px; --r-pill: 999px;

  /* ---- depth: one light source from above; tight shadow + diffuse shadow ---- */
  --sh-1: 0 1px 2px rgba(0,0,0,.4);
  --sh-2: 0 4px 12px rgba(0,0,0,.45), 0 1px 3px rgba(0,0,0,.4);
  --sh-3: 0 16px 40px rgba(0,0,0,.55), 0 4px 12px rgba(0,0,0,.45);

  /* ---- motion ---- */
  --t-fast: 120ms;
  --t:      180ms;
  --ease:   cubic-bezier(.22,.61,.36,1);

  /* ---- aliases: what the existing stylesheets already reference ---- */
  --panel: var(--surface);
  --line:  var(--border);
  --ink:   var(--text);
  --mute:  var(--dim);
  --seal:  var(--cta);
  --gold:  var(--warn);

  /* ---- premium landing additions ---- */
  --glow-cta:    0 0 40px rgba(25,195,125,.22);
  --glow-accent: 0 0 40px rgba(91,140,255,.18);
  --glow-rec:    0 0 24px rgba(255,77,77,.28);
  --grid-line:   rgba(255,255,255,.035);
  --grid-size:   44px;
  --hero-grad:   radial-gradient(1200px 600px at 72% -6%, rgba(91,140,255,.14), transparent 62%), radial-gradient(900px 480px at 4% 10%, rgba(25,195,125,.10), transparent 56%);
  --card-grad:   linear-gradient(165deg, rgba(255,255,255,.06), transparent 40%);
  --card-hover:  linear-gradient(165deg, rgba(255,255,255,.10), transparent 40%);
  --band-grad:   linear-gradient(120deg, rgba(91,140,255,.15), rgba(25,195,125,.12));
}

/* ============================ primitives ============================ */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  font-family: var(--font); font-size: var(--fs-14); font-weight: 700;
  border-radius: var(--r); padding: 10px 17px; cursor: pointer;
  border: 1px solid var(--border); background: var(--surface-2); color: var(--text);
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease);
}
.btn:hover  { background: var(--elev); border-color: var(--border-strong); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }

.btn-primary, .btn.go {
  background: var(--cta); color: var(--cta-ink); border-color: transparent;
}
.btn-primary:hover, .btn.go:hover { background: var(--cta-press); border-color: transparent; }

.btn-quiet, .btn.ghost { background: transparent; }
.btn-quiet:hover, .btn.ghost:hover { background: var(--surface-2); }

.btn-danger { background: transparent; border-color: rgba(239,68,68,.4); color: #ffb4b4; }
.btn-danger:hover { background: rgba(239,68,68,.12); border-color: var(--danger); }

:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-sm);
}

.eyebrow {
  font-size: var(--fs-11); font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--dim);
}

/* ============================ modal sheet ============================ */

.scrim {
  position: fixed; inset: 0; z-index: 9999;
  display: none; align-items: center; justify-content: center; padding: var(--s-5);
  background: rgba(4,6,13,.72);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.scrim.open { display: flex; animation: scrim-in var(--t) var(--ease); }
@keyframes scrim-in { from { opacity: 0; } to { opacity: 1; } }

.sheet {
  width: 100%; max-width: 440px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-xl); box-shadow: var(--sh-3);
  padding: var(--s-6); text-align: left;
  animation: sheet-in var(--t) var(--ease);
}
@keyframes sheet-in {
  from { opacity: 0; transform: translateY(8px) scale(.985); }
  to   { opacity: 1; transform: none; }
}
.sheet-h { font-size: var(--fs-20); font-weight: 700; letter-spacing: -.02em;
           line-height: 1.2; margin: var(--s-2) 0 var(--s-3); color: var(--text); }
.sheet-p { font-size: var(--fs-14); line-height: 1.6; color: var(--dim); margin: 0 0 var(--s-5); }
/* Host pages carry their own form-button rules (auth.html sets width:100%).
   Pin the width here so a sheet dropped onto any page keeps its shape. */
.sheet-actions { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.sheet-actions .btn { width: auto; flex: 0 0 auto; }
.sheet-fine { font-size: var(--fs-12); color: var(--faint); margin: var(--s-4) 0 0; line-height: 1.5; }
.sheet-fine a { color: var(--accent-2); }

/* ============================ account strip ============================ */

.acct-email { color: var(--text); }
.acct-link  { color: var(--dim); text-decoration: none; transition: color var(--t-fast) var(--ease); }
.acct-link:hover { color: var(--text); }

/* ============================ status ============================ */

.status { display: inline-flex; align-items: center; gap: var(--s-2);
          font-size: var(--fs-12); font-weight: 700; color: var(--dim); }
.status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--faint); }
.status.is-live::before    { background: var(--live); }
.status.is-partial::before { background: var(--warn); }
.status.is-error::before   { background: var(--danger); }
.status.is-starting::before{ background: var(--accent); animation: blink 1.2s infinite; }
@keyframes blink { 50% { opacity: .35; } }

/* ============================ skeleton ============================ */

.skeleton {
  background: linear-gradient(90deg, var(--surface-2) 25%, var(--elev) 37%, var(--surface-2) 63%);
  background-size: 400% 100%; border-radius: var(--r-sm);
  animation: shimmer 1.4s ease infinite;
}
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }

/* ============================ empty state ============================ */

.empty { text-align: center; padding: var(--s-12) var(--s-5); color: var(--dim); }
.empty-h { font-size: var(--fs-16); font-weight: 700; color: var(--text); margin-bottom: var(--s-2); }
.empty-p { font-size: var(--fs-14); line-height: 1.6; max-width: 42ch; margin: 0 auto var(--s-5); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}