/* ============================================================
   EmotiumMemòria — Design Tokens v2
   Carrega PRIMER que tots els altres fitxers CSS propis.
   ============================================================ */

:root {
  /* ── Colors base ──────────────────────────────────────── */
  --emo-bg:          #eef2f4;
  --emo-panel:       #ffffff;
  --emo-panel-soft:  #f8fafb;
  --emo-border:      #e2eaee;
  --emo-border-soft: #eef2f4;

  /* ── Text ─────────────────────────────────────────────── */
  --emo-text:       #243540;
  --emo-text-muted: #7a9ca6;
  --emo-text-dim:   #aabec7;

  /* ── Brand / Primary ──────────────────────────────────── */
  --emo-primary:        #00b187;
  --emo-primary-hover:  #00a07a;
  --emo-primary-dim:    rgba(0, 177, 135, 0.12);
  --emo-primary-border: rgba(0, 177, 135, 0.30);

  /* ── Sidebar ──────────────────────────────────────────── */
  --emo-sidebar:       #192d35;
  --emo-sidebar-dark:  #111f26;
  --emo-sidebar-text:  #b0cdd6;
  --emo-sidebar-muted: #6a8e9a;

  /* ── Estats ───────────────────────────────────────────── */
  --emo-success: #00b187;
  --emo-danger:  #dc3545;
  --emo-warn:    #e08e0b;
  --emo-info:    #3a7bd5;

  /* ── Radius ───────────────────────────────────────────── */
  --emo-radius-sm:   6px;
  --emo-radius:      10px;
  --emo-radius-lg:   14px;
  --emo-radius-pill: 999px;

  /* ── Ombres ───────────────────────────────────────────── */
  --emo-shadow-sm: 0 1px 2px rgba(36, 53, 64, .06);
  --emo-shadow:    0 4px 12px rgba(36, 53, 64, .08);
  --emo-shadow-lg: 0 20px 40px rgba(36, 53, 64, .18);

  /* ── Espaiat (alineat amb Bootstrap) ──────────────────── */
  --emo-gap-xs: 4px;
  --emo-gap-sm: 8px;
  --emo-gap:    12px;
  --emo-gap-md: 16px;
  --emo-gap-lg: 24px;
  --emo-gap-xl: 32px;

  /* ── Tipografia ───────────────────────────────────────── */
  --emo-font:      system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --emo-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* ── Layout ───────────────────────────────────────────── */
  --emo-sidebar-w: 240px;
  --emo-topbar-h:  58px;
}

/* ── Override Bootstrap Primary ──────────────────────────── */
:root {
  --bs-primary:     #00b187;
  --bs-primary-rgb: 0, 177, 135;
  --primary:        #00b187;
  --primary-dim:    rgba(0, 177, 135, .12);
  --primary-border: rgba(0, 177, 135, .3);
  --secondary:      #192d35;
  --secondary-dark: #111f26;
  --sidebar-w:      240px;
  --topbar-h:       58px;
}

.btn-primary {
  --bs-btn-bg:           #00b187;
  --bs-btn-border-color: #00b187;
  --bs-btn-hover-bg:     #00a07a;
  --bs-btn-hover-border-color: #00a07a;
  --bs-btn-active-bg:    #009873;
}

.btn-outline-primary {
  --bs-btn-color:        #00b187;
  --bs-btn-border-color: rgba(0, 177, 135, .40);
  --bs-btn-hover-bg:     rgba(0, 177, 135, .08);
  --bs-btn-hover-color:  #00b187;
  --bs-btn-hover-border-color: rgba(0, 177, 135, .60);
  --bs-btn-active-bg:    rgba(0, 177, 135, .14);
  --bs-btn-active-color: #00b187;
}

.text-primary  { color: var(--emo-primary) !important; }
.bg-primary    { background-color: var(--emo-primary) !important; }
.link-primary  { color: var(--emo-primary) !important; }
.border-primary { border-color: var(--emo-primary) !important; }

/* ── Focus ring global ────────────────────────────────────── */
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
  border-color:  var(--emo-primary);
  box-shadow:    0 0 0 .2rem rgba(0, 177, 135, .18);
  outline: none;
}

/* ── Bootstrap checkbox/switch primary ───────────────────── */
.form-check-input:checked {
  background-color: var(--emo-primary);
  border-color:     var(--emo-primary);
}

/* ── Body base ────────────────────────────────────────────── */
body {
  font-family: var(--emo-font);
  color:       var(--emo-text);
  background:  var(--emo-bg);
  font-size:   14px;
  line-height: 1.5;
}

/* ── Animation skeletons ──────────────────────────────────── */
@keyframes emo-skeleton {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── Modal slide-in ───────────────────────────────────────── */
@keyframes emo-modal-in {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}