/* path: core/static/ui/css/base.css */

*{box-sizing:border-box}
html,body{height:100%}

h1,h2,h3,h4,h5,h6{
  font-family:var(--font-head);
}

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-size:var(--body);
  line-height:var(--lh);
  overflow-x:hidden;
}

a{
  color:inherit;
  text-decoration:none;
}

button{
  font:inherit;
}

.Main{
  min-height:100vh;
}

.Container{
  width:100%;
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 var(--pad);
}

.Container--wide{
  max-width:var(--maxw-wide);
}

.Secondary{
  color:var(--text-2);
}

.Muted{
  color:var(--text-3);
}

/* ============================================================
   BLOCK (shared section system)
   ============================================================ */

.Block{
  padding:var(--space-7) 0;
}

.Block--alt{
  background:var(--surface-2);
}

.Block__head{
  max-width:760px;
  margin:0 0 var(--space-4);
}

.Block__title{
  margin:0 0 var(--space-2);
  font-size:1.9rem;
  line-height:1.05;
  letter-spacing:-.02em;
}

.Block__subtitle{
  margin:0;
  font-size:1.05rem;
  line-height:1.4;
  color:var(--text-2);
}

.Block__body{
  margin:var(--space-6) 0 0;
}

.Block__cta{
  margin-top:0;
  display:flex;
  gap:var(--space-2);
  flex-wrap:wrap;
}

@media (min-width:768px){
  .Block{
    padding:var(--space-8) 0;
  }

  .Block__body{
    margin:var(--space-7) 0 0;
  }
}

/* ============================================================
   CARD — CLEAN / FLAT
   ============================================================ */

.Card{
  background:var(--surface);
  border-radius:var(--r-m);
  border:1px solid var(--divider);
  box-shadow:none;
}

.CardInteractive{
  transition:
    background .15s ease,
    border-color .15s ease;
}

@media (hover:hover){
  .CardInteractive:hover{
    border-color:var(--divider-2);
    background:var(--surface-2);
  }
}

.CardInteractive:focus-within{
  border-color:var(--divider-2);
}

/* ============================================================
   INPUT
   ============================================================ */

.Input{
  width:100%;
  height:var(--h-input);
  padding:0 var(--space-3);
  border:1px solid transparent;
  border-radius:var(--r-s);
  background:transparent;
  color:var(--text);
  font:inherit;
  outline:none;
}

.Input::placeholder{
  color:var(--text-3);
  opacity:1;
}

.Input:focus::placeholder{
  opacity:0;
}

/* ============================================================
   BUTTONS — CLEAN
   ============================================================ */

.Btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:var(--h-btn);
  padding:0 var(--space-3);
  border:0;
  border-radius:var(--r-m);
  cursor:pointer;
  font:inherit;
  font-size:1.2rem;
  line-height:1;
  white-space:nowrap;
  width:auto;
  text-decoration:none;
  transition:
    background .15s ease,
    border-color .15s ease,
    transform .08s ease;
}

.Btn--block{
  width:100%;
}

.BtnPrimary{
  background:var(--accent);
  color:#fff;
}

.BtnPrimary:hover{
  background:var(--accent-strong);
}

.BtnPrimary:active{
  transform:translateY(1px);
}

.BtnSecondary{
  background:transparent;
  border:1px solid var(--divider-2);
  color:var(--text);
}

.BtnSecondary:hover{
  background:rgba(255,255,255,.03);
  border-color:var(--divider-3);
}

.BtnSecondary:active{
  transform:translateY(1px);
}

.BtnGhost{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:var(--h-btn);
  padding:0 var(--space-4);
  border-radius:var(--r-pill);
  background:transparent;
  border:1px solid rgba(255,255,255,.14);
  color:var(--text);
  text-decoration:none;
  transition:
    background .15s ease,
    border-color .15s ease,
    transform .08s ease;
}

@media (hover:hover){
  .BtnGhost:hover{
    background:rgba(255,255,255,.06);
    border-color:rgba(255,255,255,.18);
  }
}

.BtnGhost:active{
  transform:translateY(1px);
}

/* ============================================================
   TEXT UTILS
   ============================================================ */

.Accent{
  color:var(--accent);
}