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

:root {
  /* brand — pink × pastel blue on cool neutrals. Blue is the everyday workhorse;
     pink belongs to the AI (drafts, auto-bookings, follow-ups) */
  --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 — everyday actions */
  --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/active ring: soft blue (the action colour), deliberately NOT pink, a pink
     outline on an input reads as a validation error */
  --focus:0 0 0 3px rgba(94,155,239,.20); --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(118,172,244,.28);
  --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 the everyday UI in both themes (pink is the AI's
   colour); 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);}

/* --border-soft is a hairline-divider token and all but vanishes as an input outline
   in BOTH themes (#EFEDF6 on white, #252237 on #1D1A2B). EVERY text-like form control
   steps up to --border-strong so its edges actually read; the :not() list keeps buttons
   and checkable controls out. !important because many inputs carry the border inline.
   Borderless inputs (border:none) are unaffected, border-color alone draws nothing. */
input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="file"]):not([type="range"]):not([type="color"]),
textarea,
select{border-color:var(--border-strong) !important;}
/* unchecked custom checkboxes get the same lift, no !important so the accent-filled
   :checked styling in component CSS still wins */
input[type="checkbox"]:not(:checked){border-color:var(--border-strong);}

/* ===== Form-control focus: one soft-blue ring, everywhere, both themes =====
   Focused inputs sharpen to a blue border with the soft --focus ring. Pink stays out
   of it (pink borders read as errors); the brand shows up only in the caret.
   !important so inline borders pick it up too. */
input, textarea { caret-color: var(--acc); }
input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="file"]):not([type="range"]):not([type="color"]):focus,
textarea:focus,
select:focus {
  border-color: var(--blue) !important;
  box-shadow: var(--focus) !important;
  outline: none !important;
}
/* borderless inputs living INSIDE composed containers (chat composer, inline search)
   keep their quiet look, a ring around an inner fragment reads broken */
.reply-box textarea:focus, .ev-link-search input:focus { box-shadow: none !important; border-color: transparent !important; }

/* ===== Row icon buttons (pencil / confirm / delete on inline-editable rows) =====
   Shared across the services table, review sites, and anywhere rows get per-row
   actions. Quiet at rest, dark outline on hover, the confirm variant is the blue
   action fill (matching .btn-acc's theme flip: white glyph light, dark glyph dark). */
.icon-btn { display:inline-flex; align-items:center; justify-content:center; flex:0 0 30px; width:30px; height:30px; border:1px solid var(--border-strong); border-radius:8px; background:var(--surface); color:var(--muted); cursor:pointer; font-size:14px; transition:color .12s, border-color .12s; }
.icon-btn:hover { color:var(--ink); border-color:var(--ink); }
.icon-btn.icon-btn-acc { color:#fff; background:var(--blue); border-color:var(--blue); }
.icon-btn.icon-btn-acc:hover { color:#fff; border-color:var(--blue); opacity:.88; }
:root[data-theme="dark"] .icon-btn.icon-btn-acc { color:#14121C; }
:root[data-theme="dark"] .icon-btn.icon-btn-acc:hover { color:#14121C; }

/* 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);}
/* dark mode only: badge numbers flip dark on the lifted pink */
:root[data-theme="dark"] .nav .badge{color:#14121C;}
:root[data-theme="dark"] .lbl .n{color:#14121C;}
: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(--blue-press);}
:root[data-theme="dark"] .toggle:not(.off){background:var(--acc);}
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 — same system as the website. Structural
   anchors (nav, rows, buttons, chips) opt out with their own text-decoration:none. */
a{color:var(--acc);text-decoration:underline;text-underline-offset:3px;font-weight:600;}
a:hover{text-decoration:underline;}
::selection{background:rgba(25,22,41,.14);}

/* wordmark — gradient text (pink → lilac → blue) on both themes; the brand mark, not
   another inky text element. 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;}
.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(--blue);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);}

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