/* Aalap — brand palette override. Loaded AFTER style.css + marketing.css.
   Changing CSS variables here cascades through the entire app + marketing
   site (cards, buttons, gradients, accents). */

:root {
  /* surfaces */
  --bg:     #0A0B0F;
  --bg-2:   #11141B;
  --card:   #14171E;
  --card-2: #181C24;
  --line:   #232830;
  --line-2: #2C323B;

  /* text */
  --text:    #F6F7FA;
  --muted:   #A0A6B2;
  --muted-2: #6B7280;

  /* primary accent — saffron (replaces yellow) */
  --accent:      #FFB23B;
  /* secondary — indigo (replaces cyan) */
  --accent-2:    #5E72E4;
  /* tertiary accents */
  --accent-pink:  #FF6B7E;
  --accent-green: #5EE7B8;
  --danger:       #FF6B7E;

  --ring: 0 0 0 3px rgba(255, 178, 59, .18);

  --radius:    14px;
  --radius-lg: 20px;
}

/* Display serif for headlines + brand wordmark */
.brand .name,
.hero-h1,
.hero-text h1,
.section-head h2,
.cta-strip h2,
.legal h1,
.legal h2,
.dash-head h1,
.auth-card h1 {
  font-family: 'Fraunces', 'Inter', 'Times New Roman', serif;
  font-weight: 900;
  letter-spacing: -.02em;
}

.brand .name {
  font-size: 1.15rem;
  letter-spacing: -.01em;
  color: var(--text);
  font-weight: 800;
}

/* The brand mark — replace the old yellow .dot with the actual logo */
.brand .dot {
  width: 22px; height: 22px;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none !important;
  animation: none !important;
  /* inline saffron-on-ink mark */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none'><path d='M 12 72 C 20 30, 40 22, 58 48' stroke='%23FFB23B' stroke-width='12' stroke-linecap='round' stroke-linejoin='round'/><path d='M 62 34 L 96 55 L 62 76 Z' fill='%23FFB23B'/></svg>") !important;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* Gradient hero swap to the saffron / indigo palette */
.hero-h1 .grad {
  background: linear-gradient(90deg, #FFB23B, #FF8A1F 60%, #FF6B7E);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.hero-h1 .grad2 {
  background: linear-gradient(90deg, #5E72E4, #5EE7B8);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.hero-text h1 .grad {
  background: linear-gradient(90deg, #FFB23B, #FF8A1F 60%, #FF6B7E);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}

/* Eyebrow tags — saffron instead of cyan */
.eyebrow {
  color: var(--accent);
  background: rgba(255, 178, 59, .08);
  border-color: rgba(255, 178, 59, .22);
}

/* Primary button — saffron gradient, ink text */
.primary,
.primary-sm,
.primary.lg {
  background: linear-gradient(180deg, #FFCB6A, #FFB23B);
  color: var(--bg) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.45) inset,
              0 8px 24px -8px rgba(255, 178, 59, .55);
}

/* Phone mockup glow on the landing — saffron */
.reel-bg {
  background: linear-gradient(180deg, #FFB23B, #FF7B1F);
  box-shadow: 0 0 60px 20px rgba(255, 178, 59, .55);
}
.reel-cap {
  color: var(--accent);
  text-shadow: 0 0 18px rgba(255, 178, 59, .55), 0 2px 0 #111;
}
.reel-cta { color: var(--accent-2); }
.ex-trading { background: radial-gradient(220px 280px at 50% 55%, rgba(255,178,59,.18), transparent 70%), #0a0f17; }

/* Caption pop on examples */
.ex-cap {
  color: var(--accent);
  text-shadow: 0 0 14px rgba(255, 178, 59, .55);
}

/* Tier card popular border */
.tier.popular { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(255, 178, 59, .08); }
.tier-badge   { background: var(--accent); color: var(--bg); }

/* Brand-name "Aalap" inside .name wordmark — make it premium */
.foot-bottom span,
.foot-meta,
.hero-meta { color: var(--muted-2); }

/* BETA badge — indigo to differentiate from saffron CTA */
.badge {
  color: var(--accent-2);
  background: rgba(94, 114, 228, .1);
  border-color: rgba(94, 114, 228, .3);
}

/* Mic button — keep saffron, deeper shadow */
.mic {
  background: linear-gradient(180deg, #FFCB6A, #FFB23B);
  color: var(--bg);
  box-shadow:
    0 1px 0 rgba(255,255,255,.55) inset,
    0 12px 28px -10px rgba(255, 178, 59, .65),
    0 2px 14px rgba(255, 178, 59, .18);
}

/* Progress bar gradient */
#bar-fill {
  background: linear-gradient(90deg, var(--accent-2), var(--accent));
}

/* The aalap mark in the phone-mic floating bubble */
.phone-mic {
  background: linear-gradient(180deg, #FFCB6A, #FFB23B);
  box-shadow: 0 14px 30px -6px rgba(255, 178, 59, .6),
              0 0 0 6px rgba(255, 178, 59, .12);
}