/*! Infinite Semantic Inc. — https://www.insemantic.com */
/* MB Beauty CRM — editorial base. Tokens + primitives shared with the public site
   (paper/ink/brass/espresso, Fraunces / Inter / IBM Plex Mono, hairlines, square corners). */
:root {
  --paper:    #f4efe6;
  --paper-2:  #efe7da;
  --paper-3:  #faf7f1;
  --ink:      #1c1712;
  --ink-2:    #3b322b;
  --ink-soft: #5c5147;
  --muted:    #6b6156;
  --brass:    #876731;
  --brass-2:  #b9914f;
  --espresso: #211a14;
  --sand:     #ddd0bb;
  --line:        rgba(28,23,18,.16);
  --line-2:      rgba(28,23,18,.08);
  --line-on-dark: rgba(244,239,230,.16);
  --display: "Fraunces", Georgia, "Times New Roman", serif;
  --sans:    "Inter", system-ui, -apple-system, sans-serif;
  --mono:    "IBM Plex Mono", "SFMono-Regular", ui-monospace, monospace;
  --ease:    cubic-bezier(.22,1,.36,1);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--sans); font-size: 15px; line-height: 1.55;
  color: var(--ink); background: var(--paper); -webkit-font-smoothing: antialiased; }
[hidden] { display: none !important; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; padding: 0; }
img, svg { display: block; }
input, select, textarea { font: inherit; color: inherit; border-radius: 0; }
h1, h2, h3, p, ul { margin: 0; }
ul { list-style: none; padding: 0; }
::selection { background: var(--brass); color: var(--paper); }

.it { font-style: italic; color: var(--brass); }

/* Mono label — the site's universal caption */
.label, .lbl { font-family: var(--mono); font-size: 10.5px; font-weight: 400; letter-spacing: .16em;
  text-transform: uppercase; color: var(--muted); }

/* Kicker with the leading brass dash (site pattern) */
.crm-kicker { display: inline-flex; align-items: center; gap: 12px; font-family: var(--mono);
  font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--brass); }
.crm-kicker::before { content: ''; width: 26px; height: 1px; background: var(--brass); }

/* Inline icons */
.ic { width: 1.05em; height: 1.05em; fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* Buttons — square, mono uppercase, like the site */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase;
  padding: 13px 20px; border: 1px solid var(--ink); color: var(--ink); background: transparent;
  transition: background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease); }
.btn:hover { background: var(--ink); color: var(--paper); }
.btn:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; }
.btn-solid, .btn--clay { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.btn-solid:hover, .btn--clay:hover { background: var(--brass); border-color: var(--brass); color: #fff; }
.btn-wide { width: 100%; }
.btn--sm { padding: 9px 14px; font-size: 10.5px; }
.btn[disabled] { opacity: .5; pointer-events: none; }

/* Stacked field — underline style, like the site's contact form */
.fld { margin-bottom: 20px; text-align: left; }
.fld label { display: block; font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 9px; }
.fld label i { color: var(--brass); font-style: normal; }
.fld input, .fld textarea, .fld select {
  width: 100%; background: transparent; border: 0; border-bottom: 1px solid var(--line);
  padding: 8px 0; font-size: 15px; color: var(--ink); transition: border-color .35s var(--ease); }
.fld input:focus, .fld textarea:focus, .fld select:focus { outline: none; border-bottom-color: var(--brass); }
.fld textarea { resize: vertical; min-height: 76px; }
.fld select option { color: var(--ink); background: var(--paper); }

/* Inline controls (toolbar, JS-rendered .crm-search / .crm-select) — same underline language */
.crm-search, .crm-select, .fld-inline {
  background: transparent; border: 0; border-bottom: 1px solid var(--line);
  padding: 9px 0; font-size: 14px; color: var(--ink); transition: border-color .35s var(--ease); }
.crm-search:focus, .crm-select:focus, .fld-inline:focus { outline: none; border-bottom-color: var(--brass); }
.crm-search::placeholder { color: rgba(28,23,18,.35); }
.crm-select option { color: var(--ink); background: var(--paper); }