/* 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"] .chan .tick svg{stroke: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 */
.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);}
.on-dark .wm{color:#FBF6EF;}
.on-dark .wm .g{color:#F2789B;}

/* 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:18px 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;}