/* Otto — modern minimalist design system (light, airy, one violet accent).
   Loaded LAST on every page so its base polish wins over inline styles.
   Color values are set by each page's remapped tokens; this file owns
   typography, spacing rhythm, radii, soft shadows and the brand mark. */

:root{
  --otto:#6C5CE7; --otto-deep:#5B4BD6; --otto-soft:rgba(108,92,231,.08);
  --otto-ink:#16141F; --otto-slate:#6A6A7B; --otto-line:#ECEAF3;
  --otto-radius:16px; --otto-radius-sm:11px;
  --otto-shadow:0 1px 2px rgba(20,18,40,.04), 0 18px 48px -30px rgba(20,18,40,.30);
}

html,body{ -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
body{
  font-family:"DM Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif !important;
  background:
    radial-gradient(900px 520px at 100% -12%, rgba(108,92,231,.07), transparent 60%),
    radial-gradient(680px 460px at -8% 112%, rgba(108,92,231,.05), transparent 60%),
    #FBFBFD !important;
  color:var(--otto-ink);
}

h1,h2,h3{ letter-spacing:-.015em; }

/* Buttons — pill, violet, soft motion */
button, .btn, .btn-primary{
  font-family:inherit;
  border-radius:11px;
  transition:transform .12s ease, box-shadow .15s ease, background .15s ease, opacity .15s ease;
}
button:hover:not(:disabled), .btn-primary:hover{ transform:translateY(-1px); }
button:active:not(:disabled){ transform:translateY(0); }

/* Inputs & selects — calm focus ring */
input[type=text], textarea, select{
  font-family:inherit;
  transition:border-color .15s ease, box-shadow .15s ease;
}
input[type=text]:focus, textarea:focus, select:focus{
  outline:none;
  border-color:var(--otto) !important;
  box-shadow:0 0 0 3px var(--otto-soft);
}

/* Surfaces — softer borders, gentle elevation, rounder corners */
.card, .panel{ box-shadow:var(--otto-shadow); }

/* Pills / chips / badges — fully rounded */
.badge, .chip, .chiptag, .tier{ border-radius:999px !important; }

/* Links inherit the accent unless a page colors them explicitly */
a{ color:var(--otto); }

/* Minimal scrollbar */
*::-webkit-scrollbar{ width:10px; height:10px; }
*::-webkit-scrollbar-thumb{ background:#dedce8; border-radius:999px; border:2px solid transparent; background-clip:content-box; }
*::-webkit-scrollbar-thumb:hover{ background:#cfccdd; }

/* ── Otto brand mark (shared header lockup) ───────────────────────── */
.otto-brand{ display:inline-flex; align-items:center; gap:10px; text-decoration:none; }
.otto-brand .mk{
  width:30px; height:30px; border-radius:9px; flex:none;
  background:linear-gradient(135deg,var(--otto),#9B8CFF);
  box-shadow:0 6px 16px -6px rgba(108,92,231,.6);
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-weight:800; font-size:16px; letter-spacing:-.03em;
}
.otto-brand .nm{ font-weight:800; font-size:18px; color:var(--otto-ink); letter-spacing:-.02em; }
.otto-brand .by{ font-size:11px; color:var(--otto-slate); margin-left:2px; align-self:center; }