/* ============================================================================
   Me & You Tech Solutions — canonical brand stylesheet
   Mirrors the design system at contabil.meandyoutechsolutions.com.br so every
   DBMonitor Agent surface shares one identity. Light theme by default with an
   automatic prefers-color-scheme dark variant.

   This product is themed "agent": --theme-accent resolves to the brand blue
   (#5687da), the accent the brand system assigns to DBMonitor Agent.

   Served by the webapp at /brand/brand.css (assets/brand/). Standalone/offline
   pages (install landing, agent --setup UI) inline an equivalent copy.
   ========================================================================== */
:root{
  /* palette */
  --brand:#3b4184; --brand-deep:#21357a; --brand-blue:#5687da; --brand-soft:#6c98df;
  --brand-atmosphere:#232a63; --accent:#46b6e0; --accent-bright:#62bae0; --accent-deep:#2b8fc4;
  --accent-agent:var(--brand-blue);
  --brand-gradient:linear-gradient(110deg, var(--brand-deep) 0%, var(--brand-blue) 45%, var(--accent-bright) 100%);
  /* this product's accent */
  --theme-accent:var(--accent-agent);

  /* light theme surfaces */
  --bg:#fff; --bg-soft:#f8fafc; --bg-tint:#f1f5f9; --brand-tint:#e9ecf9; --rule:#e2e8f0;
  --ink:#0f172a; --ink-soft:#334155; --ink-mute:#64748b;
  /* semantic */
  --ok:#059669; --warn:#d97706; --bad:#dc2626;

  /* type */
  --font-sans:-apple-system,BlinkMacSystemFont,"Inter","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-mono:ui-monospace,"SF Mono","SFMono-Regular","Menlo","Consolas","Liberation Mono",monospace;
  --fw-normal:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700; --fw-extrabold:800;
  --lh-body:1.6; --lh-snug:1.35; --lh-tight:1.15;
  --text-xs:.8125rem; --text-sm:.9375rem; --text-base:1rem; --text-lg:1.125rem; --text-xl:1.375rem;
  --text-2xl:1.75rem; --text-3xl:2.25rem; --text-4xl:3rem; --text-hero:clamp(2.25rem, 5vw + 1rem, 4rem);

  /* shape + depth */
  --radius-sm:6px; --radius:10px; --radius-lg:16px; --radius-pill:999px;
  --shadow-sm:0 1px 2px #0f172a0f; --shadow:0 4px 12px #0f172a14; --shadow-lg:0 12px 32px #0f172a1f;

  /* space + layout + motion */
  --sp-1:.25rem; --sp-2:.5rem; --sp-3:.75rem; --sp-4:1rem; --sp-6:1.5rem; --sp-8:2rem;
  --sp-12:3rem; --sp-16:4rem; --sp-24:6rem;
  --container:72rem; --container-sm:44rem; --container-pad:clamp(1rem, 4vw, 2rem);
  --ease:cubic-bezier(.2, .7, .2, 1); --dur-color:.2s; --dur-transform:.12s;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#0d1230; --bg-soft:#131a40; --bg-tint:#1b2256; --brand-tint:#5ac4ff29; --rule:#232b4a;
    --ink:#f1f5f9; --ink-soft:#c8d1e0; --ink-mute:#8e9ab5;
    --brand-soft:#7ad3f5; --accent:#7ad3f5;
    --shadow-sm:0 1px 2px #0006; --shadow:0 4px 12px #00000080; --shadow-lg:0 12px 32px #0009;
  }
}

/* base ---------------------------------------------------------------------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font-sans);
     line-height:var(--lh-body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:var(--theme-accent);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{line-height:var(--lh-tight);color:var(--ink)}
.brand-bar{height:4px;background:var(--brand-gradient)}
.container{width:100%;max-width:var(--container);padding-inline:var(--container-pad);margin-inline:auto}
.container--sm{max-width:var(--container-sm)}
.eyebrow,.section-eyebrow{color:var(--theme-accent);font-weight:var(--fw-bold);
     letter-spacing:.1em;text-transform:uppercase;font-size:var(--text-xs)}
.muted{color:var(--ink-mute)}

/* buttons ------------------------------------------------------------------- */
.btn{display:inline-flex;justify-content:center;align-items:center;gap:var(--sp-2);
     border-radius:var(--radius);font-family:var(--font-sans);font-weight:var(--fw-semibold);
     font-size:var(--text-sm);cursor:pointer;white-space:nowrap;border:1px solid transparent;
     padding:.75rem 1.25rem;line-height:1;text-decoration:none;
     transition:transform var(--dur-transform) var(--ease), background var(--dur-color) var(--ease),
                box-shadow var(--dur-color) var(--ease), border-color var(--dur-color) var(--ease),
                color var(--dur-color) var(--ease)}
.btn:hover{transform:translateY(-1px);text-decoration:none}
.btn:active{transform:translateY(0)}
.btn:focus-visible{outline:2px solid var(--brand);outline-offset:3px}
.btn--primary{background:var(--theme-accent);color:#fff;box-shadow:var(--shadow-sm)}
.btn--primary:hover{background:color-mix(in srgb, var(--theme-accent) 82%, #000 18%);box-shadow:var(--shadow)}
.btn--ghost{color:var(--ink);border-color:var(--rule);background:0 0}
.btn--ghost:hover{border-color:var(--theme-accent);color:var(--theme-accent)}
.btn--light{color:var(--brand-deep);background:#fff}
.btn--sm{font-size:var(--text-xs);padding:.5rem .9rem}
.btn--lg{font-size:var(--text-base);padding:.9rem 1.6rem}
.btn--block{width:100%}

/* cards --------------------------------------------------------------------- */
.card{position:relative;overflow:hidden;isolation:isolate;background:var(--bg);
     border:1px solid var(--rule);border-radius:var(--radius-lg);padding:var(--sp-6);
     box-shadow:var(--shadow-sm);
     transition:transform var(--dur-color) var(--ease), box-shadow var(--dur-color) var(--ease),
                border-color var(--dur-color) var(--ease)}
.card::before{content:"";position:absolute;inset:0 0 auto;height:3px;background:var(--card-accent,var(--theme-accent))}
.card:hover{box-shadow:var(--shadow);border-color:var(--card-accent,var(--theme-accent));transform:translateY(-2px)}
.card--plain::before{display:none}
.card--plain:hover{transform:none;border-color:var(--rule);box-shadow:var(--shadow-sm)}

/* hero ---------------------------------------------------------------------- */
.hero{position:relative;overflow:hidden;padding-block:var(--sp-16) var(--sp-12);
     background:radial-gradient(120% 90% at 85% -10%, color-mix(in srgb, var(--theme-accent) 12%, transparent), transparent 60%),
                radial-gradient(90% 70% at 0% 0%, var(--brand-tint), transparent 55%)}
.hero__title{font-size:var(--text-hero);font-weight:var(--fw-extrabold);letter-spacing:-.025em;
     line-height:var(--lh-tight);text-wrap:balance;margin:0 0 var(--sp-4)}
.hero__title-accent{background:var(--brand-gradient);color:#0000;-webkit-background-clip:text;background-clip:text}
.lead{font-size:var(--text-lg);color:var(--ink-soft);max-width:60ch;margin:0 0 var(--sp-8)}

/* badges / pills / chips ---------------------------------------------------- */
.badge,.chip{display:inline-flex;align-items:center;gap:var(--sp-2);font-weight:var(--fw-medium);
     font-size:var(--text-xs);background:var(--bg-tint);color:var(--ink-soft);
     border-radius:var(--radius-pill);padding:.2rem .6rem}
.chip--ok{color:var(--ok)} .chip--bad{color:var(--bad)} .chip--warn{color:var(--warn)}

/* forms --------------------------------------------------------------------- */
label{display:block;font-size:var(--text-sm);color:var(--ink-soft);margin-bottom:.3rem;font-weight:var(--fw-medium)}
input,select,textarea{width:100%;background:var(--bg);border:1px solid var(--rule);color:var(--ink);
     border-radius:var(--radius);padding:.6rem .7rem;font-size:var(--text-sm);font-family:inherit;
     transition:border-color var(--dur-color) var(--ease), box-shadow var(--dur-color) var(--ease)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--theme-accent);
     box-shadow:0 0 0 3px color-mix(in srgb, var(--theme-accent) 20%, transparent)}

/* status dots --------------------------------------------------------------- */
.dot{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--ink-mute);vertical-align:middle}
.dot.ok{background:var(--ok)} .dot.warn{background:var(--warn)} .dot.bad{background:var(--bad)}

/* code ---------------------------------------------------------------------- */
code{font-family:var(--font-mono);font-size:.9em;background:var(--bg-tint);
     border-radius:var(--radius-sm);padding:.1rem .35rem;color:var(--ink)}

/* sections + footer --------------------------------------------------------- */
section{padding-block:clamp(3rem,7vw,5rem)}
.sec-title{font-size:var(--text-3xl);font-weight:var(--fw-extrabold);letter-spacing:-.02em;margin:0 0 var(--sp-2)}
.sec-sub{color:var(--ink-mute);margin:0 0 var(--sp-8)}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--sp-6)}
footer{border-top:1px solid var(--rule);padding-block:var(--sp-8);color:var(--ink-mute);font-size:var(--text-sm)}
footer .fbrand{color:var(--ink);font-weight:var(--fw-bold)}
footer a{color:var(--theme-accent)}