/* ============================================================
   A MAESTRIA DIGITAL — Design System (pele reutilizável)
   Fonte: sistema fechado por Amanda em 13/08/2026.
   Uso: <link rel="stylesheet" href="/maestria-ds.css"> e usar as
   variáveis --ma-* e as classes .ma-*. Importe SÓ este arquivo.
   Conceito: quem tem maestria não improvisa, rege. O balão do logo
   ganha haste e vira nota musical.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,opsz,wght@0,6..96,400..700;1,6..96,400..700&family=Comfortaa:wght@400;500;600;700&display=swap');

:root{
  /* ---- paleta (inalterada do manual) ---- */
  --ma-tinta:#291b41; --ma-tinta2:#22183a; --ma-roxo:#3a2258; --ma-roxo2:#44235d;
  --ma-azul:#2a2d6b; --ma-azul2:#4b4e9c; --ma-uva:#6b247f; --ma-uva2:#844192;
  --ma-destaque:#31ace3;   /* azul — ação, link, ativo */
  --ma-lilas:#b9a4e8;      /* lilás — ênfase, itálico */
  --ma-areia:#F3F1EE;      /* fundo do interior */
  --ma-verde:#7BC47F;      /* ok/online */

  /* texto sobre claro */
  --ma-ink:#291b41; --ma-txt2:#5a5270; --ma-txt3:#7d7593; --ma-rotulo:#9a93ae;

  /* ---- semânticas: INTERIOR CLARO (padrão) ---- */
  --ma-bg:var(--ma-areia); --ma-card:#ffffff; --ma-fg:var(--ma-ink);
  --ma-muted:var(--ma-txt2); --ma-faint:var(--ma-txt3); --ma-label:var(--ma-rotulo);
  --ma-line:rgba(41,27,65,.10); --ma-side:var(--ma-tinta); --ma-side-fg:#efeaf6;
  --ma-accent:var(--ma-destaque);

  /* fontes */
  --ma-serif:'Bodoni Moda','Didot','Bodoni MT',Georgia,serif;   /* títulos e impacto */
  --ma-sans:'Comfortaa','Quicksand','Trebuchet MS',system-ui,sans-serif; /* interface */

  /* forma */
  --ma-r:14px; --ma-r-side:0 26px 26px 0; --ma-pill:999px;
  --ma-ease:cubic-bezier(.2,.6,.2,1); --ma-dur:220ms;
}

/* ---- ESCURO: o mundo da entrada (login) ---- */
:root[data-theme="dark"]{
  --ma-bg:var(--ma-tinta2); --ma-card:#2c2148; --ma-fg:#efeaf6;
  --ma-muted:#c3badd; --ma-faint:#9a93ae; --ma-label:#8f86a9;
  --ma-line:rgba(239,234,246,.12); --ma-side:#1c1430;
}
.ma-login-bg{ background:linear-gradient(160deg,#3a2258,#291b41 60%,#22183a); color:#efeaf6; }

/* =================== TIPOGRAFIA =================== */
.ma-h1{font-family:var(--ma-serif);font-weight:500;font-size:clamp(30px,4.6vw,46px);line-height:1.05;letter-spacing:.01em;color:var(--ma-fg);margin:0}
.ma-h2{font-family:var(--ma-serif);font-weight:500;font-size:22px;line-height:1.2;color:var(--ma-fg);margin:0}
.ma-h3{font-family:var(--ma-serif);font-weight:500;font-size:18px;color:var(--ma-fg);margin:0}
.ma-em{font-style:italic;color:var(--ma-uva2)}         /* ênfase serifada */
.ma-em-lilas{font-style:italic;color:var(--ma-lilas)}
.ma-body{font-family:var(--ma-sans);font-size:14px;line-height:1.55;color:var(--ma-fg)}
.ma-label{font-family:var(--ma-sans);font-size:10.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--ma-label)}
.ma-wordmark{font-family:var(--ma-sans);font-weight:700;letter-spacing:.22em;text-transform:uppercase}
.ma-wordmark b{color:var(--ma-destaque)}

/* =================== A NOTA (marca + marcador) =================== */
/* logo: bola com canto característico + haste */
.ma-nota{position:relative;display:inline-block;width:34px;height:40px;flex-shrink:0}
.ma-nota .bola{position:absolute;bottom:0;left:0;width:26px;height:26px;background:currentColor;border-radius:999px 999px 3px 999px}
.ma-nota .haste{position:absolute;top:0;right:5px;width:3px;height:34px;background:currentColor;border-radius:2px}
/* marcador de lista (menor) */
.ma-nm{position:relative;display:inline-block;width:9px;height:13px;flex-shrink:0;color:var(--ma-destaque)}
.ma-nm .b{position:absolute;bottom:0;left:0;width:9px;height:9px;background:currentColor;border-radius:999px 999px 2px 999px}
.ma-nm .h{position:absolute;top:0;right:1px;width:2px;height:11px;background:currentColor;border-radius:2px}

/* =================== PENTAGRAMA (divisor/textura) =================== */
.ma-penta{height:22px;display:flex;flex-direction:column;justify-content:space-between}
.ma-penta i{height:1px;background:var(--ma-line)}

/* =================== SUPERFÍCIES =================== */
.ma-card{background:var(--ma-card);border:1px solid var(--ma-line);border-radius:var(--ma-r);padding:20px}
.ma-side{background:var(--ma-side);color:var(--ma-side-fg);border-radius:var(--ma-r-side)}

/* =================== BOTÕES (pílula) =================== */
.ma-btn{font-family:var(--ma-sans);font-weight:700;font-size:13.5px;letter-spacing:.02em;
  padding:12px 22px;border-radius:var(--ma-pill);border:none;cursor:pointer;
  background:var(--ma-tinta);color:#fff;transition:filter var(--ma-dur) var(--ma-ease),transform var(--ma-dur) var(--ma-ease)}
.ma-btn:hover{filter:brightness(1.12)} .ma-btn:active{transform:translateY(1px)}
.ma-btn-accent{background:var(--ma-destaque);color:#fff}
.ma-btn-ghost{background:none;border:1px solid var(--ma-line);color:var(--ma-muted)}
.ma-btn-ghost:hover{border-color:var(--ma-destaque);color:var(--ma-destaque);filter:none}
/* no escuro (login) o principal é branco com texto tinta */
[data-theme="dark"] .ma-btn, .ma-login-bg .ma-btn{background:#fff;color:var(--ma-tinta)}

/* =================== INPUTS =================== */
.ma-input{font-family:var(--ma-sans);font-size:14px;color:var(--ma-fg);
  background:var(--ma-card);border:1px solid var(--ma-line);border-radius:var(--ma-r);
  padding:12px 14px;outline:none;width:100%}
.ma-input:focus{border-color:var(--ma-destaque)}
.ma-input::placeholder{color:var(--ma-faint)}
.ma-login-bg .ma-input{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16);color:#fff}

/* =================== PÍLULAS DE STATUS =================== */
.ma-pill{font-family:var(--ma-sans);font-size:9.5px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;padding:4px 11px;border-radius:var(--ma-pill);white-space:nowrap}
.ma-pill-on{background:rgba(123,196,127,.16);color:#3f9a54}
.ma-pill-soon{background:rgba(49,172,227,.14);color:#2076a0}
.ma-pill-idea{background:rgba(154,147,174,.16);color:var(--ma-txt3)}

/* =================== NAV LATERAL =================== */
.ma-nav-item{display:flex;gap:12px;align-items:center;padding:10px 12px;border-radius:10px;border:none;
  background:none;color:#c3badd;font-family:var(--ma-sans);font-size:13.5px;cursor:pointer;text-align:left;width:100%;
  transition:background var(--ma-dur) var(--ma-ease),color var(--ma-dur) var(--ma-ease)}
.ma-nav-item:hover{color:#fff;background:rgba(255,255,255,.05)}
.ma-nav-item.on{background:rgba(49,172,227,.16);color:#fff}

/* =================== MOVIMENTO =================== */
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}