/* ============================================================ Sopra UI — kit visual compartilhado (Sistema de Design Sopra) · v1 Fonte única de tokens + componentes base para os 5 apps. Tema editorial: papel #F7F5F0, verde mostarda #7AA436, DM fonts. Apps HTML: . Apps React: espelhar os tokens no tailwind.config. Requer as fontes DM (DM Sans / DM Serif Display / DM Mono) no . ============================================================ */ :root{ /* superfícies */ --bg:#F7F5F0; --paper:#F7F5F0; --paper-2:#EFEAE0; --card:#FFFFFF; --panel:#FFFFFF; /* tinta */ --ink:#22201B; --ink-soft:#4A463D; --muted:#7C7568; --line:#E4DED2; --line-2:#D8D0C1; /* marca — verde mostarda */ --ok:#7AA436; /* preenchimento / marca / sucesso */ --verde:#5A7A1F; /* verde para TEXTO ou borda sobre fundo claro (legível) */ --verde-wash:#EEF0DC; /* fundo verde bem claro (hover, foco) */ /* semânticas */ --warn:#D98A1E; --risk:#D14340; /* forma */ --r-s:8px; --r-m:12px; --r-l:16px; --shadow:0 1px 2px rgba(34,31,26,.04), 0 10px 30px rgba(34,31,26,.06); --shadow-lift:0 2px 4px rgba(34,31,26,.05), 0 18px 44px rgba(34,31,26,.12); } /* Tema escuro é opt-in (data-theme="dark"); apps com surfaces #fff fixas ficam no claro. */ :root[data-theme="dark"]{ --bg:#17150F; --paper:#17150F; --paper-2:#201D16; --card:#252118; --panel:#252118; --ink:#F0EADD; --ink-soft:#CABFAE; --muted:#948B7A; --line:#332E24; --line-2:#413A2D; --ok:#97C24A; --verde:#97C24A; --verde-wash:#24280F; --warn:#E6A542; --risk:#E86460; --shadow:0 1px 2px rgba(0,0,0,.3), 0 12px 34px rgba(0,0,0,.4); --shadow-lift:0 2px 6px rgba(0,0,0,.35), 0 22px 50px rgba(0,0,0,.5); } *{box-sizing:border-box} body{margin:0;background:var(--bg);color:var(--ink);font-family:'DM Sans',system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased;line-height:1.5} .serif{font-family:'DM Serif Display',Georgia,serif;font-weight:400;letter-spacing:.1px} .mono{font-family:'DM Mono',ui-monospace,monospace} a{color:inherit;text-decoration:none} .hidden{display:none!important} .center{text-align:center;color:var(--muted);font-size:14px;padding:60px} /* topbar */ header{display:flex;align-items:center;justify-content:space-between;padding:16px 28px;border-bottom:1px solid var(--line);background:var(--card)} .brand{display:flex;align-items:center;gap:10px} .brand .dot{width:12px;height:12px;border-radius:3px;background:var(--ok)} .brand b{font-size:18px;letter-spacing:.2px} /* Logomarca Sopra (wordmark chumbo). Em fundo escuro, use .on-dark p/ inverter p/ branco. */ .brand-logo{height:22px;width:auto;display:block} .brand-logo.on-dark{filter:brightness(0) invert(1)} .auth-logo{height:38px;width:auto;display:block;margin:0 auto 18px} .who{display:flex;align-items:center;gap:12px;font-size:14px;color:var(--muted);flex-wrap:wrap} .who .role{font-family:'DM Mono',monospace;font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--verde);border:1px solid var(--verde);border-radius:999px;padding:3px 10px} /* botões */ .btn{cursor:pointer;border:1px solid var(--line-2);background:var(--card);border-radius:var(--r-s);padding:9px 15px;font-family:inherit;font-size:14px;font-weight:500;color:var(--ink);transition:.15s} .btn:hover{border-color:var(--ink)} .btn:focus-visible{outline:2px solid var(--ok);outline-offset:2px} .btn.primary{background:var(--ok);border-color:var(--ok);color:var(--ink)} /* texto escuro: legível sobre mostarda */ .btn.primary:hover{filter:brightness(.95);border-color:var(--ok)} .btn.ghost{background:transparent;border-color:transparent;color:var(--verde)} .btn.ghost:hover{background:var(--verde-wash)} .btn.danger{background:var(--risk);border-color:var(--risk);color:#fff} .btn.danger:hover{filter:brightness(.95);border-color:var(--risk)} .btn.sm{padding:6px 11px;font-size:13px} .btn:disabled{opacity:.5;cursor:not-allowed} /* campos */ .field{margin-bottom:14px} .field label{display:block;font-size:12px;color:var(--muted);margin-bottom:6px;letter-spacing:.02em} .field input,.field select{width:100%;padding:11px 13px;border:1px solid var(--line-2);border-radius:var(--r-s);font-family:inherit;font-size:15px;background:var(--bg);color:var(--ink)} .field input:focus,.field select:focus{outline:none;border-color:var(--ok);box-shadow:0 0 0 3px var(--verde-wash)} .err{color:var(--risk);font-size:13px;min-height:18px;margin:4px 0 10px} /* layout base */ main{max-width:980px;margin:0 auto;padding:48px 24px} h1.serif{font-size:34px;margin:0 0 6px;letter-spacing:-.2px} .sub{color:var(--muted);margin:0 0 36px;font-size:15px} /* cartão de app / grid */ .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px} .app{display:block;background:var(--card);border:1px solid var(--line);border-radius:var(--r-l);padding:22px;transition:.15s;position:relative;overflow:hidden;box-shadow:var(--shadow)} .app:hover{transform:translateY(-2px);box-shadow:var(--shadow-lift);border-color:transparent} .app .ico{font-size:26px;margin-bottom:14px} .app h3{margin:0 0 6px;font-size:18px} .app p{margin:0;color:var(--muted);font-size:14px;line-height:1.45} .app .tag{position:absolute;top:16px;right:16px;font-size:11px;color:var(--muted)} .app.locked{opacity:.5;filter:grayscale(.6);cursor:not-allowed;box-shadow:none} .app .edit{margin-top:14px;font-size:12px;color:var(--verde)} /* login */ .auth-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px} .auth{width:100%;max-width:380px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-l);padding:34px;box-shadow:var(--shadow)} .auth .dot{width:14px;height:14px;border-radius:4px;background:var(--ok);margin-bottom:18px} .auth h2{margin:0 0 4px;font-size:24px} .auth .sub{margin:0 0 24px;font-size:14px} @media (prefers-reduced-motion:reduce){*{transition:none!important}}