/* ClinicGrowth — app design system (evolving). Tokens + base components. */

:root {
  /* brand — raspberry on cream */
  --ink:#221E17; --head:#17130D; --muted:#6E6757; --muted-2:#9A9281;
  --acc:#FA6781; --acc-press:#EC5572; --acc-soft:#FFE7EC; --acc-ink:#C63552;
  --bg:#F3EFE6; --bg-2:#F0EBDD; --surface:#FFFFFF; --surface-2:#F8F4EB; --surface-3:#F0EBDD; --surface-warm:#F8F4EB;
  --border:#E6E0D1; --border-soft:#EEEADF; --border-strong:#DCD4C2;
  --success:#1F8A5B; --warning:#B8791F; --danger:#E0455F;
  --ink-dark:#1A130F;

  --focus:0 0 0 3px rgba(34,30,23,.13); --ink-2:#1A130F;
  /* legacy aliases (being migrated) */
  --violet:#FA6781; --violet-press:#EC5572;

  --r-sm:9px; --r:12px; --r-lg:16px; --r-xl:22px; --r-2xl:30px;
  --shadow-sm:0 1px 2px rgba(40,30,10,.06),0 1px 1px rgba(40,30,10,.04);
  --shadow-md:0 4px 16px -2px rgba(40,30,10,.08),0 2px 6px -1px rgba(40,30,10,.05);
  --shadow-lg:0 24px 48px -12px rgba(40,30,10,.16),0 8px 16px -8px rgba(40,30,10,.08);

  --font:'Gabarito',-apple-system,BlinkMacSystemFont,system-ui,sans-serif; /* display */
  --body:-apple-system,BlinkMacSystemFont,'Segoe UI','Helvetica Neue',Helvetica,Arial,sans-serif; /* body & ui — system stack, like Notion */
  --mono:'Geist Mono',ui-monospace,monospace;
}

/* ===== Dark theme — warm near-black, coral stays the one accent ===== */
:root[data-theme="dark"]{
  --ink:#F1ECE1; --head:#FBF7EF; --muted:#B4AB97; --muted-2:#857D6C;
  --acc:#FF7088; --acc-press:#FF8093; --acc-soft:#3A2127; --acc-ink:#FF93A8;
  --bg:#15120D; --bg-2:#1A150F; --surface:#211C15; --surface-2:#26211A; --surface-3:#322B21; --surface-warm:#26211A;
  --border:#332C22; --border-soft:#272118; --border-strong:#473E30;
  --success:#3FB97F; --warning:#DBA64A; --danger:#F26A80;
  --ink-dark:#FF7088; /* primary action becomes coral on dark */

  --focus:0 0 0 3px rgba(255,112,136,.22);
  --violet:#FF7088; --violet-press:#FF8093;

  --shadow-sm:0 1px 2px rgba(0,0,0,.4),0 1px 1px rgba(0,0,0,.3);
  --shadow-md:0 4px 16px -2px rgba(0,0,0,.5),0 2px 6px -1px rgba(0,0,0,.4);
  --shadow-lg:0 24px 48px -12px rgba(0,0,0,.6),0 8px 16px -8px rgba(0,0,0,.45);
}
/* primary button: coral with ink text in dark, vs ink with white in light */
:root[data-theme="dark"] .btn-acc,
:root[data-theme="dark"] .btn-grad,
:root[data-theme="dark"] .btn-primary{background:var(--acc);color:#1A130F;}
:root[data-theme="dark"] .btn-acc:hover,
:root[data-theme="dark"] .btn-grad:hover,
:root[data-theme="dark"] .btn-primary:hover{background:var(--acc-press);}
:root[data-theme="dark"] .btn-ink{background:var(--surface-3);color:var(--head);}
:root[data-theme="dark"] .btn-ink:hover{background:var(--border-strong);}
:root[data-theme="dark"] ::selection{background:rgba(255,112,136,.28);}

/* dark: glyphs/badges sitting on an --ink (now cream) or --ink-dark (now coral) fill
   must flip their white foreground to dark, or they vanish */
:root[data-theme="dark"] .acct .av{color:var(--bg);}
:root[data-theme="dark"] .nav a.on .badge{color:var(--bg);}
:root[data-theme="dark"] .step .num{color:var(--bg);}
:root[data-theme="dark"] .chip.on{color:var(--bg);}
:root[data-theme="dark"] .lead.sel .check svg{stroke:var(--bg);}
:root[data-theme="dark"] .act{color:var(--bg);}
:root[data-theme="dark"] .act:hover{background:var(--acc-press);}
:root[data-theme="dark"] .toggle:not(.off){background:var(--success);}
html{color-scheme:light;}
:root[data-theme="dark"]{color-scheme:dark;}

/* theme toggle (injected by theme.js) */
.theme-tog{display:flex;align-items:center;gap:11px;width:100%;padding:9px 11px;border-radius:10px;
  background:none;border:none;cursor:pointer;color:var(--muted);font-family:var(--body);font-size:14.5px;font-weight:500;text-align:left;}
.theme-tog:hover{background:var(--surface-2);color:var(--ink);}
.theme-tog svg{width:19px;height:19px;color:var(--muted-2);flex-shrink:0;}
.theme-tog .lbl-t{flex:1;}
.theme-tog .ind{margin-left:auto;font-size:11px;font-weight:700;color:var(--muted-2);font-family:var(--mono);}
.theme-tog .sun{display:none;} .theme-tog .moon{display:block;}
:root[data-theme="dark"] .theme-tog .sun{display:block;} :root[data-theme="dark"] .theme-tog .moon{display:none;}

*{box-sizing:border-box;}
html,body{margin:0;height:100%;}
body{font-family:var(--body);color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;line-height:1.5;}
h1,h2,h3,h4{font-family:var(--font);margin:0;font-weight:800;letter-spacing:-.02em;line-height:1.1;}
a{color:var(--ink-dark);text-decoration:none;font-weight:600;}
a:hover{text-decoration:underline;}
::selection{background:rgba(34,30,23,.14);}

/* wordmark — ink (dark) on light theme, pink accent on dark theme so it pops against
   the dark surface. The .g span is kept for any legacy templates that still split the
   wordmark into two colours; new templates just use bare <span class="wm">Salve</span>. */
.wm{font-family:var(--font);font-weight:900;letter-spacing:-.02em;color:var(--ink);line-height:.95;white-space:nowrap;}
.wm .g{color:var(--acc);}
:root[data-theme="dark"] .wm{color:var(--acc);}
:root[data-theme="dark"] .wm .g{color:var(--acc);}
.on-dark .wm{color:var(--acc);}
.on-dark .wm .g{color:var(--acc);}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-family:var(--body);
  font-size:15px;font-weight:600;padding:12px 20px;border-radius:var(--r);border:1px solid transparent;
  cursor:pointer;transition:transform .08s,filter .15s,background .15s,border-color .15s,box-shadow .15s;white-space:nowrap;}
.btn:active{transform:scale(.985);}
.btn-acc,.btn-grad,.btn-primary{background:var(--ink-dark);color:#fff;}
.btn-acc:hover,.btn-grad:hover,.btn-primary:hover{background:#2C2118;}
.btn-ink{background:var(--ink);color:#fff;}
.btn-ink:hover{background:var(--ink-2);}
.btn-violet{background:var(--violet);color:#fff;}
.btn-violet:hover{background:var(--violet-press);}
.btn-ghost{background:var(--surface);color:var(--ink);border-color:var(--border-strong);}
.btn-ghost:hover{background:var(--surface-warm);border-color:var(--border-strong);}
.btn-block{width:100%;}
.btn svg[stroke]{stroke:currentColor;} /* icons follow button text colour in both themes */
.btn-lg{padding:13px 22px;font-size:15.5px;}

/* inputs */
.field{margin-bottom:14px;}
.field>label{display:block;font-size:12.5px;font-weight:600;color:var(--ink-2);margin-bottom:7px;}
.input{width:100%;padding:12px 14px;border:1px solid var(--border-strong);border-radius:var(--r);
  font-family:var(--body);font-size:15px;color:var(--ink);background:var(--surface);outline:none;
  transition:border-color .15s,box-shadow .15s;}
.input::placeholder{color:var(--muted-2);}
.input:hover{border-color:var(--border-strong);}
.input:focus{border-color:var(--ink);box-shadow:var(--focus);}

/* surfaces */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);box-shadow:var(--shadow-md);}
.divider{display:flex;align-items:center;gap:14px;margin:12px 0;color:var(--muted-2);font-size:12px;font-weight:600;}
.divider::before,.divider::after{content:"";flex:1;height:1px;background:var(--border);}

/* pills / badges */
.pill{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;padding:4px 11px;border-radius:99px;background:var(--acc-soft);color:var(--acc-ink);}

.muted{color:var(--muted);}
svg{display:block;}