/* ============================================
   Atlyn Brand — Custom CSS
   Complements Tailwind v4 CDN utilities
   ============================================ */

:root {
  --c-slate:      #1A1F2E;
  --c-gold:       #C8A96E;
  --c-helix:      #2A4A7F;
  --c-classmind:  #1E5C3A;
  --c-ignition:   #C4511A;
  --c-foundation: #4A4A5A;
  --c-mist:       #F7F5F1;
  --c-ink:        #0D0D0D;
  --c-secondary:  #5A5750;
}

/* ---- Base ---- */
*, *::before, *::after { box-sizing: border-box; }
body { font-family: 'Inter', system-ui, -apple-system, sans-serif; color: var(--c-ink); -webkit-font-smoothing: antialiased; }
.font-display { font-family: Georgia, 'Times New Roman', serif; }

/* ---- Brand color utilities ---- */
.bg-slate-brand   { background-color: var(--c-slate); }
.bg-gold          { background-color: var(--c-gold); }
.bg-mist          { background-color: var(--c-mist); }
.bg-helix         { background-color: var(--c-helix); }
.bg-classmind     { background-color: var(--c-classmind); }
.bg-ignition      { background-color: var(--c-ignition); }
.bg-foundation    { background-color: var(--c-foundation); }

.text-gold        { color: var(--c-gold); }
.text-slate-brand { color: var(--c-slate); }
.text-secondary   { color: var(--c-secondary); }
.text-ink         { color: var(--c-ink); }
.text-helix       { color: var(--c-helix); }
.text-classmind   { color: var(--c-classmind); }
.text-ignition    { color: var(--c-ignition); }
.text-foundation  { color: var(--c-foundation); }

.border-gold      { border-color: var(--c-gold); }
.border-helix     { border-color: var(--c-helix); }
.border-classmind { border-color: var(--c-classmind); }
.border-ignition  { border-color: var(--c-ignition); }
.border-foundation { border-color: var(--c-foundation); }

/* ---- Buttons ---- */
.btn-gold {
  display: inline-block;
  background-color: var(--c-gold);
  color: var(--c-slate);
  font-family: 'Arial', sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.85rem 2rem;
  text-decoration: none;
  transition: opacity 0.2s;
  cursor: pointer;
  border: none;
}
.btn-gold:hover { opacity: 0.88; }

.btn-outline-gold {
  display: inline-block;
  background: transparent;
  color: var(--c-gold);
  border: 1.5px solid var(--c-gold);
  font-family: 'Arial', sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.85rem 2rem;
  text-decoration: none;
  transition: all 0.2s;
  cursor: pointer;
}
.btn-outline-gold:hover {
  background-color: var(--c-gold);
  color: var(--c-slate);
}

/* ---- Forms ---- */
.form-label {
  display: block;
  font-family: 'Arial', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-secondary);
  margin-bottom: 0.4rem;
}

.form-input {
  display: block;
  width: 100%;
  background: white;
  border: 1px solid #D1CEC9;
  color: var(--c-ink);
  padding: 0.7rem 0.9rem;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.875rem;
  transition: border-color 0.2s;
  outline: none;
  appearance: none;
}
.form-input:focus { border-color: var(--c-gold); }
.form-input::placeholder { color: #B0ADA8; }

select.form-input { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235A5750' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.9rem center; padding-right: 2.5rem; cursor: pointer; }

/* ---- Badges ---- */
.badge {
  font-family: 'Arial', sans-serif;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.2rem 0.6rem;
  display: inline-block;
}
.badge-live        { background-color: #dcfce7; color: #166534; }
.badge-development { background-color: #fef9c3; color: #854d0e; }
.badge-planned     { background-color: #f1f5f9; color: #475569; }

/* ---- Scroll fade-in ---- */
.fade-in {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}
.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---- Nav scroll shadow ---- */
.nav-scrolled { box-shadow: 0 2px 24px rgba(0,0,0,0.25); }

/* ---- Prose styles for legal pages ---- */
.prose-atlyn h2 { font-family: Georgia, serif; font-size: 1.25rem; color: var(--c-ink); margin-top: 2.5rem; margin-bottom: 0.75rem; }
.prose-atlyn p  { color: var(--c-secondary); line-height: 1.75; margin-bottom: 1rem; }
.prose-atlyn ul { list-style: disc; padding-left: 1.5rem; color: var(--c-secondary); line-height: 1.75; margin-bottom: 1rem; }
.prose-atlyn li { margin-bottom: 0.4rem; }
.prose-atlyn a  { color: var(--c-slate); text-decoration: underline; }
.prose-atlyn a:hover { color: var(--c-gold); }
.prose-atlyn strong { color: var(--c-ink); font-weight: 600; }

/* ---- Print styles for investor page ---- */
@media print {
  nav, footer, .btn-gold, .btn-outline-gold { display: none !important; }
  body { font-size: 12pt; color: #000; }
  section { break-inside: avoid; padding: 1rem 0; }
  .bg-slate-brand { background: white !important; color: #000 !important; }
  .text-white, .text-white\/60, .text-gold { color: #000 !important; }
}