/* ═══════════════════════════════════════════════════════════════
   CONTENT LAB AGENCY · BRAND TOKENS v1
   Direction A locked 2026-06-10. Dark theme. Premium-by-restraint.
   Used by: login.html, home.html, onboarding-bot.html, power-up-bot.html
═══════════════════════════════════════════════════════════════ */

:root {
  /* Base */
  --bg-deep:      #0A1628;
  --bg-mid:       #0F2340;
  --bg-soft:      #15355B;

  /* Surfaces (subtle on dark) */
  --surface:      rgba(255,255,255,0.02);
  --surface-2:    rgba(255,255,255,0.04);
  --surface-3:    rgba(255,255,255,0.06);

  /* Borders (hairlines) */
  --line:         rgba(255,255,255,0.06);
  --line-warm:    rgba(245,193,108,0.18);
  --line-warm-2:  rgba(245,193,108,0.32);

  /* Text */
  --ink:          #ffffff;
  --ink-soft:     rgba(255,255,255,0.72);
  --ink-mute:     rgba(255,255,255,0.45);
  --ink-faint:    rgba(255,255,255,0.28);

  /* Accents */
  --coral:        #DC5F4C;
  --gold:         #F5C16C;
  --gold-soft:    rgba(245,193,108,0.85);
  --blue:         #97C0D9;

  /* Gradients */
  --grad-warm:    linear-gradient(135deg, #DC5F4C, #F5C16C);
  --grad-warm-3:  linear-gradient(135deg, #DC5F4C 0%, #F5C16C 60%, #ffd99a 100%);

  /* Radii */
  --radius-sm:    8px;
  --radius-md:    10px;
  --radius-lg:    14px;
  --radius-xl:    18px;

  /* Status (used for completion / progress only) */
  --success:      #22c55e;
}

/* ═══ RESET ═══ */
* { margin:0; padding:0; box-sizing:border-box; }
html, body { min-height:100vh; }
button, input, textarea, select { font-family:inherit; }
a { color:inherit; text-decoration:none; }

/* ═══ BODY ═══ */
body {
  font-family:'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  background:var(--bg-deep);
  color:var(--ink);
  font-size:15px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  background:
    radial-gradient(ellipse 50% 50% at 0% 0%, rgba(220,95,76,0.06) 0%, transparent 60%),
    radial-gradient(ellipse 50% 50% at 100% 100%, rgba(245,193,108,0.05) 0%, transparent 60%),
    linear-gradient(135deg, #0A1628 0%, #0F2340 50%, #0A1628 100%);
  background-attachment:fixed;
}

/* ═══ LOGO LOCKUPS ═══ */
.cl-content { font-weight:600; color:var(--ink); letter-spacing:-0.3px; }
.cl-lab {
  font-weight:900;
  background: var(--grad-warm);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  letter-spacing:-0.3px;
}
.tier-row { display:flex; align-items:center; gap:14px; }
.tier-line {
  height:1px;
  background:linear-gradient(90deg, transparent, var(--gold-soft), transparent);
}
.tier-line.short { width:38px; }
.tier-line.shorter { width:22px; }
.tier-text {
  font-weight:300; color:var(--gold-soft); text-transform:uppercase;
}

/* Hero scale (login) */
.lockup-hero { display:flex; flex-direction:column; align-items:center; gap:14px; }
.lockup-hero .wm { display:flex; align-items:center; gap:11px; }
.lockup-hero .wm svg { width:46px; height:64px; margin-top:-8px; }
.lockup-hero .wm-txt { font-size:40px; line-height:1; }
.lockup-hero .tier-text { font-size:13px; letter-spacing:5px; }

/* Medium scale (home header) */
.lockup-md { display:flex; flex-direction:column; align-items:center; gap:10px; }
.lockup-md .wm { display:flex; align-items:center; gap:8px; }
.lockup-md .wm svg { width:28px; height:40px; margin-top:-5px; }
.lockup-md .wm-txt { font-size:22px; line-height:1; }
.lockup-md .tier-text { font-size:9px; letter-spacing:3.4px; }

/* Nav scale (in-app chrome) */
.lockup-nav { display:flex; align-items:center; gap:8px; }
.lockup-nav svg { width:20px; height:28px; margin-top:-3px; }
.lockup-nav .wm-txt { font-size:15px; line-height:1; }
.lockup-nav .nav-tier {
  font-size:8.5px; letter-spacing:2.4px; font-weight:300;
  color:var(--gold-soft); text-transform:uppercase;
  border-left:1px solid var(--line-warm-2);
  padding-left:9px; margin-left:6px;
}

/* ═══ TYPOGRAPHY UTILITIES ═══ */
.t-display { font-size:48px; font-weight:200; letter-spacing:-1.6px; line-height:1.08; color:var(--ink); }
.t-display em, .t-h1 em, .t-h2 em, .t-lead em {
  font-style:italic; font-weight:300;
  background:var(--grad-warm-3);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.t-h1 { font-size:36px; font-weight:800; letter-spacing:-0.8px; line-height:1.12; color:var(--ink); }
.t-h2 { font-size:24px; font-weight:700; letter-spacing:-0.4px; color:var(--ink); }
.t-h3 { font-size:18px; font-weight:700; letter-spacing:-0.2px; color:var(--ink); }
.t-lead { font-size:18px; font-weight:300; line-height:1.55; color:var(--ink-soft); letter-spacing:-0.1px; }
.t-body { font-size:15px; font-weight:400; line-height:1.7; color:var(--ink-soft); }
.t-micro { font-size:10px; font-weight:800; letter-spacing:2.6px; text-transform:uppercase; color:var(--gold-soft); }
.t-eyebrow { font-size:10px; font-weight:700; letter-spacing:3.2px; text-transform:uppercase; color:var(--gold-soft); }

/* ═══ BUTTONS ═══ */
.btn {
  font-family:inherit; font-size:13px; font-weight:700; letter-spacing:0.4px;
  padding:14px 28px; border-radius:var(--radius-md); cursor:pointer;
  transition:transform 0.15s, box-shadow 0.15s, opacity 0.15s;
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  text-decoration:none;
}
.btn:disabled, .btn[disabled] {
  opacity:0.4; cursor:not-allowed;
}
.btn-primary {
  background:var(--grad-warm);
  color:#fff; border:none;
  box-shadow:0 6px 20px rgba(220,95,76,0.35);
}
.btn-primary:hover:not(:disabled) { transform:translateY(-1px); box-shadow:0 10px 28px rgba(220,95,76,0.45); }
.btn-secondary {
  background:transparent;
  color:var(--gold);
  border:1px solid var(--line-warm-2);
}
.btn-secondary:hover { background:rgba(245,193,108,0.06); }
.btn-ghost {
  background:transparent;
  color:var(--ink-soft);
  border:none;
  padding:14px 6px;
  text-decoration:underline;
  text-decoration-color:var(--line-warm-2);
  text-underline-offset:4px;
}
.btn-block { width:100%; }

/* ═══ FORM ═══ */
.form-label {
  display:block; font-size:10px; font-weight:700; letter-spacing:2.4px;
  text-transform:uppercase; color:var(--ink-mute);
  margin-bottom:10px;
}
.form-input {
  width:100%; padding:14px 18px;
  background:rgba(255,255,255,0.04);
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  color:var(--ink); font-size:15px;
  transition:border-color 0.15s, background 0.15s;
  outline:none;
}
.form-input::placeholder { color:var(--ink-faint); }
.form-input:focus {
  border-color:var(--line-warm-2);
  background:rgba(255,255,255,0.05);
}
.form-input.has-value { border-color:var(--line-warm-2); }
.form-helper {
  font-size:11px; color:var(--ink-faint);
  margin-top:8px; font-weight:300; line-height:1.5;
}
.form-error {
  font-size:11px; color:var(--coral);
  margin-top:8px; font-weight:500; line-height:1.5;
}

/* ═══ CARDS ═══ */
.a-card {
  background:linear-gradient(180deg, rgba(255,255,255,0.025) 0%, rgba(255,255,255,0.01) 100%);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:32px;
  position:relative;
  overflow:hidden;
  transition:transform 0.15s, border-color 0.15s;
}
.a-card.featured {
  border-color:var(--line-warm-2);
  background:linear-gradient(180deg, rgba(245,193,108,0.06) 0%, rgba(245,193,108,0.01) 100%);
}
.a-card.featured::before {
  content:''; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:var(--grad-warm);
}
.a-card.locked { opacity:0.4; pointer-events:none; }
.a-card.clickable { cursor:pointer; }
.a-card.clickable:hover {
  transform:translateY(-2px);
  border-color:var(--line-warm-2);
}
.card-eyebrow {
  font-size:10px; font-weight:700; letter-spacing:2.4px;
  color:var(--gold-soft); text-transform:uppercase;
  margin-bottom:12px;
}
.card-eyebrow.muted { color:var(--ink-faint); }
.card-title {
  font-size:22px; font-weight:700; color:var(--ink);
  margin-bottom:8px; letter-spacing:-0.3px;
}
.card-sub {
  font-size:14px; color:var(--ink-mute); line-height:1.55;
  margin-bottom:24px;
}
.card-progress {
  display:flex; align-items:center; gap:14px;
  margin-bottom:22px;
}
.card-progress-bar {
  flex:1; height:4px; border-radius:2px;
  background:rgba(255,255,255,0.06); overflow:hidden;
}
.card-progress-fill { height:100%; background:var(--grad-warm); transition:width 0.4s; }
.card-progress-num {
  font-size:11px; font-weight:700; letter-spacing:0.5px;
  color:var(--ink); font-feature-settings:"tnum";
}
.card-cta {
  display:inline-flex; align-items:center; gap:8px;
  font-size:12px; font-weight:700; letter-spacing:0.4px;
  color:var(--gold);
  text-transform:uppercase;
}
.card-cta.muted { color:var(--ink-faint); }
.card-cta svg { width:13px; height:13px; }

/* ═══ LAYOUT HELPERS ═══ */
.page-shell {
  min-height:100vh;
  display:flex;
  flex-direction:column;
}
.page-container {
  max-width:1100px;
  margin:0 auto;
  padding:0 32px;
  width:100%;
}
.page-container.narrow {
  max-width:540px;
}

.app-nav {
  display:flex; justify-content:space-between; align-items:center;
  padding:28px 0;
  border-bottom:1px solid var(--line);
  margin-bottom:48px;
}
.app-nav-out {
  font-size:11px; font-weight:600; letter-spacing:1px;
  color:var(--ink-mute); text-transform:uppercase;
  cursor:pointer; background:none; border:none;
  transition:color 0.15s;
}
.app-nav-out:hover { color:var(--ink); }

/* ═══ COMPLETION STATE ═══ */
.completion {
  background:linear-gradient(180deg, rgba(245,193,108,0.08) 0%, rgba(245,193,108,0.02) 100%);
  border:1px solid var(--line-warm-2);
  border-radius:var(--radius-xl);
  padding:64px 56px;
  text-align:center;
  position:relative;
  overflow:hidden;
}
.completion::before {
  content:''; position:absolute; left:0; top:0; right:0; height:4px;
  background:var(--grad-warm-3);
}
.completion-eyebrow {
  font-size:11px; font-weight:700; letter-spacing:3.2px;
  color:var(--gold-soft); text-transform:uppercase;
  margin-bottom:18px;
}
.completion-title {
  font-size:36px; font-weight:200; line-height:1.15;
  letter-spacing:-1px; margin-bottom:18px;
  color:var(--ink);
  max-width:680px; margin-left:auto; margin-right:auto;
}
.completion-title em {
  font-style:italic; font-weight:300;
  background:var(--grad-warm-3);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.completion-body {
  font-size:15px; font-weight:300; color:var(--ink-soft); line-height:1.7;
  max-width:560px; margin:0 auto;
}

/* ═══ LOADING STATE ═══ */
.spin {
  display:inline-block; width:14px; height:14px;
  border:2px solid rgba(255,255,255,0.2);
  border-top-color:var(--gold);
  border-radius:50%;
  animation:spin 0.7s linear infinite;
}
@keyframes spin { to { transform:rotate(360deg); } }

/* ═══ MOBILE ═══ */
@media (max-width:720px) {
  .page-container { padding:0 20px; }
  .a-card { padding:24px; }
  .lockup-hero .wm-txt { font-size:32px; }
  .lockup-hero .wm svg { width:38px; height:54px; margin-top:-7px; }
  .t-display { font-size:36px; letter-spacing:-1.2px; }
  .t-h1 { font-size:28px; }
  .completion { padding:48px 28px; }
  .completion-title { font-size:28px; }
  /* iOS input zoom prevention */
  .form-input { font-size:16px; }
}