@layer pit.tokens, pit.reset, pit.components, pit.utilities;

/* ===== tokens ===== */
@layer pit.tokens {
  :root {
    --bg:#0b1220;--fg:#e6eef7;--muted:#9fb0c0;--accent:#52d1ff;
    --r-lg:16px;--sp-2:8px;--sp-3:12px;--sp-4:16px;
  }
}

/* ===== reset ===== */
@layer pit.reset {
  *,*::before,*::after{box-sizing:border-box}
  html,body{margin:0;padding:0}
  body{font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Inter;background:var(--bg);color:var(--fg)}
}

/* ===== componentes ===== */
@layer pit.components {
  .wrap{max-width:760px;margin:auto;padding:24px}
  .row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
  .card{
    background:color-mix(in oklab,var(--bg) 85%, white);
    border:1px solid color-mix(in oklab,var(--bg) 70%, white);
    border-radius:var(--r-lg);padding:var(--sp-4);margin:12px 0
  }
  .muted{color:var(--muted)}
  input,textarea{
    width:100%;padding:10px;border-radius:10px;
    border:1px solid color-mix(in oklab,var(--bg) 60%, white);
    background:transparent;color:var(--fg)
  }
  button{
    padding:10px 14px;border-radius:999px;border:0;
    background:var(--accent);color:#001018;font-weight:700;cursor:pointer
  }
  .btn-ghost{
    background:transparent;
    border:1px solid color-mix(in oklab,var(--bg) 60%, white);
    color:var(--fg)
  }
  .item{
    display:flex;align-items:baseline;gap:10px;justify-content:space-between;
    padding:10px 0;border-bottom:1px dashed color-mix(in oklab,var(--bg) 70%, white)
  }
  .tools{display:flex;gap:8px}
  .pill{padding:2px 8px;border-radius:999px;border:1px solid color-mix(in oklab,var(--bg) 60%, white)}
}

/* ===== utilities ===== */
@layer pit.utilities {
  .mt-2{ margin-top: var(--sp-2); }
  .mt-3{ margin-top: var(--sp-3); }
  .mt-4{ margin-top: var(--sp-4); }
}