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

:root {
  /* brand — pink × pastel blue on cool neutrals */
  --ink:#191629; --head:#14121C; --muted:#6E6A7E; --muted-2:#9B97AB;
  --acc:#F669A7; --acc-press:#EA5A9B; --acc-soft:#FFE3F1; --acc-ink:#D6438B;
  --bg:#F6F9FE; --bg-2:#EFF5FC; --surface:#FFFFFF; --surface-2:#F4F8FD; --surface-3:#EAF1FA; --surface-warm:#F4F8FD;
  --border:#E7E5F0; --border-soft:#EFEDF6; --border-strong:#DBD8E8;
  --success:#1F8A5B; --warning:#B8791F; --danger:#E0455F;
  --ink-dark:#191629;

  /* pastel blue — the everyday workhorse */
  --blue:#5E9BEF; --blue-press:#4A8BE6; --blue-ink:#2F6FD0; --blue-soft:#E4EFFF; --blue-pastel:#EDF4FE;
  /* the brand gradient — lilac midpoint keeps the blend luminous instead of grey */
  --g1:#FF85B8; --g2:#BFA3F8; --g3:#8FC6FF;
  --grad:linear-gradient(120deg,var(--g1) 0%,var(--g2) 52%,var(--g3) 100%);

  --focus:0 0 0 3px rgba(25,22,41,.13); --ink-2:#191629;
  /* legacy aliases (being migrated) */
  --violet:#F669A7; --violet-press:#EA5A9B;

  --r-sm:9px; --r:12px; --r-lg:16px; --r-xl:22px; --r-2xl:30px;
  --shadow-sm:0 1px 2px rgba(25,22,41,.06),0 1px 1px rgba(25,22,41,.04);
  --shadow-md:0 4px 16px -2px rgba(25,22,41,.08),0 2px 6px -1px rgba(25,22,41,.05);
  --shadow-lg:0 24px 48px -12px rgba(25,22,41,.16),0 8px 16px -8px rgba(25,22,41,.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 — cool near-black (#14121C from the brand doc), pink lifts a step for contrast ===== */
:root[data-theme="dark"]{
  --ink:#ECEAF4; --head:#F7F6FC; --muted:#A9A5BC; --muted-2:#7A7690;
  --acc:#FF7FB5; --acc-press:#FF8FC0; --acc-soft:#3A2138; --acc-ink:#FF9CC8;
  --bg:#14121C; --bg-2:#181624; --surface:#1D1A2B; --surface-2:#232032; --surface-3:#2C2840; --surface-warm:#232032;
  --border:#2F2B43; --border-soft:#252237; --border-strong:#3D3858;
  --success:#3FB97F; --warning:#DBA64A; --danger:#F26A80;
  --ink-dark:#FF7FB5; /* links/inline accents become pink on dark */

  --blue:#76ACF4; --blue-press:#8AB9F7; --blue-ink:#9CC4F8; --blue-soft:#1E2A40; --blue-pastel:#1A2333;

  --focus:0 0 0 3px rgba(255,127,181,.22);
  --violet:#FF7FB5; --violet-press:#FF8FC0;

  --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: pastel blue runs actions in both themes (pink stays the special
   ingredient); on dark the blue lifts a step and the glyphs flip dark for contrast */
:root[data-theme="dark"] .btn-acc,
:root[data-theme="dark"] .btn-grad,
:root[data-theme="dark"] .btn-primary{background:var(--blue);color:#14121C;}
:root[data-theme="dark"] .btn-acc:hover,
:root[data-theme="dark"] .btn-grad:hover,
:root[data-theme="dark"] .btn-primary:hover{background:var(--blue-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,127,181,.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;}
/* text links: always pink, always underlined (consistent with the hello@ style) */
a{color:var(--acc);text-decoration:underline;text-underline-offset:3px;font-weight:600;}
a:hover{text-decoration:underline;}
::selection{background:rgba(34,30,23,.14);}

/* wordmark — gradient text: pink → lilac → blue. The padding/margin pair makes the
   gradient paint the padding box so the final glyph isn't clipped. */
.wm{font-family:var(--font);font-weight:900;letter-spacing:-.02em;line-height:.95;white-space:nowrap;
  position:relative;padding-right:.08em;margin-right:-.08em;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;}
.wm .g{color:inherit;}
/* the brand mark: a single unread dot at the wordmark's top right — with Gloow,
   something good is always waiting. Sized in em so it scales with every logo. */
.wm::after{content:"";position:absolute;top:.14em;right:-.3em;width:.24em;aspect-ratio:1;
  background:var(--acc);-webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10"><circle cx="5" cy="5" r="5"/></svg>') center/contain no-repeat;mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10"><circle cx="5" cy="5" r="5"/></svg>') center/contain no-repeat;}
.wm::before{content:none;}
.on-dark .wm{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;}
.on-dark .wm .g{color:inherit;}

/* 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;
  text-decoration:none;}
.btn:hover{text-decoration:none;}
.btn:active{transform:scale(.985);}
.btn-acc,.btn-grad,.btn-primary{background:var(--blue);color:#fff;}
.btn-acc:hover,.btn-grad:hover,.btn-primary:hover{background:var(--blue-press);}
.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);}

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