/*
  BlooTalk — shared color layer.

  The palette is bloocrm.com's, taken verbatim from its css/themes.css so the
  two products read as one family. Token names are kept identical to bloocrm's
  (--f-*) to make future diffs against that file trivial.

  Source of truth: bloocrm.com Features-page :root
      --blue #2E86FF   --blue-dark #1666d8
      --navy #16233a   --text #4a5568   --soft #eef4ff
*/
:root {
  /* Features palette (verbatim) */
  --f-blue:        #2E86FF;
  --f-blue-dark:   #1666d8;
  --f-navy:        #16233a;
  --f-text:        #4a5568;
  --f-soft:        #eef4ff;
  --f-muted:       #8a93a3;
  --f-line:        #e6ecf5;
  --f-page:        #f7f9fd;

  /* Features "band" (dark section) family */
  --f-band:        #16233a;
  --f-band-card:   #1e3050;
  --f-band-border: #2b3f63;
  --f-band-text:   #dbe6f5;
  --f-band-dim:    #a9b8d0;
  --f-footer:      #0f1b2e;

  /* Features geometry */
  --f-r-btn:    10px;
  --f-r-card:   16px;
  --f-r-media:  18px;
  --f-r-modal:  20px;
  --f-r-pill:   30px;

  /* Features elevation */
  --f-sh-card:       0 8px 24px rgba(22,35,58,.06);
  --f-sh-card-hover: 0 24px 50px rgba(22,35,58,.16);
  --f-sh-media:      0 30px 60px rgba(22,35,58,.18);
  --f-sh-btn:        0 4px 14px rgba(46,134,255,.22);
  --f-sh-btn-hover:  0 10px 24px rgba(46,134,255,.30);

  /* State colors — bloocrm styles.css */
  --f-success: #10b981;
  --f-danger:  #ef4444;

  --f-font: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--f-font);
  color: var(--f-text);
  background: var(--f-page);
  -webkit-font-smoothing: antialiased;
}

/* bloocrm .btn — background:var(--blue); radius 10px; weight 700 */
.btn {
  background: var(--f-blue);
  color: #fff;
  padding: 12px 26px;
  border-radius: var(--f-r-btn);
  font-weight: 700;
  font-family: inherit;
  font-size: 15px;
  border: none;
  cursor: pointer;
  transition: .2s;
  box-shadow: var(--f-sh-btn);
}
.btn:hover:not(:disabled) { background: var(--f-blue-dark); box-shadow: var(--f-sh-btn-hover); }
.btn:disabled { opacity: .55; cursor: not-allowed; box-shadow: none; }

.btn-ghost {
  background: transparent;
  color: var(--f-blue);
  border: 2px solid var(--f-blue);
  box-shadow: none;
}
.btn-ghost:hover:not(:disabled) { background: var(--f-soft); color: var(--f-blue-dark); }