/* ============================================================
   Metta CRM — PINX theme override
   Remaps the app's design tokens to the Pinx (GameCRM admin)
   design system. Loaded AFTER tokens.css / app.css so every
   existing page adopts Pinx colours, type and radii at once.
   Palette source: pinx design-tokens.json (light + dark)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Public+Sans:wght@400;500;600;700;800&family=Lexend:wght@500;600;700;800&family=Noto+Sans+Georgian:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');

/* ---------------- LIGHT (Pinx light) ---------------- */
:root {
  --bg:            #f5f7f9;   /* pinx bodyBackground */
  --bg-2:          #f9fafb;   /* backgroundSecondary */
  --surface:       #ffffff;   /* background (cards) */
  --surface-2:     #f9fafb;
  --surface-hover: rgba(221, 224, 225, 0.5);   /* pinx hover */
  --surface-active:#eef1f3;
  --sidebar-bg:    #ffffff;   /* pinx sidebarBackground */
  --sidebar-fg:    #495465;
  --sidebar-muted: #727373;

  --border:        #e2e6e9;
  --border-strong: #d2d8de;
  --border-focus:  rgba(0, 179, 122, 0.45);

  --text:          #000000;
  --text-2:        #495465;
  --text-3:        #727373;
  --text-4:        #9aa1a8;
  --text-inverse:  #ffffff;

  --accent:        #00b37a;   /* pinx primary (light) */
  --accent-2:      #009a68;
  --accent-soft:   rgba(0, 179, 122, 0.10);
  --accent-soft-2: rgba(0, 179, 122, 0.18);
  --accent-text:   #00875c;

  --ai:            #6166ff;   /* pinx info / extra1 */
  --ai-2:          #4a4fe6;
  --ai-soft:       rgba(97, 102, 255, 0.10);
  --ai-soft-2:     rgba(97, 102, 255, 0.18);
  --ai-text:       #4a4fe6;

  --warn:          #ffb700;   /* pinx warning */
  --warn-soft:     rgba(255, 183, 0, 0.14);
  --danger:        #ff0055;   /* pinx error */
  --danger-soft:   rgba(255, 0, 85, 0.12);
  --info:          #6166ff;
  --info-soft:     rgba(97, 102, 255, 0.12);
  --success:       #00b37a;
  --success-soft:  rgba(0, 179, 122, 0.12);
  --extra2:        #ff61c8;   /* pinx extra2 */

  --shadow-focus:  0 0 0 3px rgba(0, 179, 122, 0.18);

  /* Pinx radii: default 8px / small 4px */
  --r-1: 4px; --r-2: 6px; --r-3: 8px; --r-4: 8px; --r-5: 12px; --r-6: 12px; --r-7: 16px;

  /* Pinx type: Public Sans + Lexend, Georgian via Noto Sans Georgian */
  --font-sans:    'Public Sans', 'Noto Sans Georgian', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Lexend', 'Noto Sans Georgian', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', SFMono-Regular, Menlo, Consolas, monospace;
}

/* ---------------- DARK (Pinx dark — GameCRM admin look) ---------------- */
:root[data-theme="dark"] {
  --bg:            #14161a;   /* pinx bodyBackground dark */
  --bg-2:          #1d1f25;
  --surface:       #26272c;   /* pinx background dark */
  --surface-2:     #1d1f25;   /* backgroundSecondary dark */
  --surface-hover: rgba(59, 61, 68, 0.5);
  --surface-active:#33353c;
  --sidebar-bg:    #1d1f25;   /* pinx sidebarBackground dark */
  --sidebar-fg:    #acb5be;
  --sidebar-muted: #7c848d;

  --border:        #46474f;
  --border-strong: #5b5d66;
  --border-focus:  rgba(0, 224, 153, 0.45);

  --text:          #ffffff;
  --text-2:        #acb5be;
  --text-3:        #acb5be;
  --text-4:        #7c848d;
  --text-inverse:  #14161a;

  --accent:        #00e099;   /* pinx primary (dark) — GameCRM admin accent */
  --accent-2:      #00c286;
  --accent-soft:   rgba(0, 224, 153, 0.12);
  --accent-soft-2: rgba(0, 224, 153, 0.22);
  --accent-text:   #00e099;

  --ai:            #6166ff;
  --ai-2:          #7a7fff;
  --ai-soft:       rgba(97, 102, 255, 0.16);
  --ai-soft-2:     rgba(97, 102, 255, 0.26);
  --ai-text:       #9297ff;

  --warn:          #ffb700;
  --warn-soft:     rgba(255, 183, 0, 0.16);
  --danger:        #ff0055;
  --danger-soft:   rgba(255, 0, 85, 0.16);
  --info:          #6166ff;
  --info-soft:     rgba(97, 102, 255, 0.16);
  --success:       #00e099;
  --success-soft:  rgba(0, 224, 153, 0.14);
  --extra2:        #ff61c8;

  --shadow-focus:  0 0 0 3px rgba(0, 224, 153, 0.22);
}

/* ---------------- Pinx component polish ----------------
   The app's classes already consume the variables above; these
   rules align a few shapes/weights with Pinx conventions. */

body { font-family: var(--font-sans); letter-spacing: 0; }
h1, h2, h3, h4, h5, h6, .page__title { font-family: var(--font-display); letter-spacing: -0.01em; }

/* Cards: Pinx uses a flat 8px card with a 1px solid border */
.card, .mx-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-3);
  box-shadow: none;
}
.card:hover, .mx-card:hover { border-color: var(--border-strong); }

/* Buttons */
.btn, .mx-btn {
  border-radius: var(--r-3);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-weight: 600;
}
.btn:hover, .mx-btn:hover { background: var(--surface-hover); border-color: var(--border-strong); }
.btn--primary, .mx-btn--primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  box-shadow: none;
}
.btn--primary:hover, .mx-btn--primary:hover { background: var(--accent-2); border-color: var(--accent-2); transform: none; }
.btn--ghost { background: transparent; border-color: transparent; }
.btn--ghost:hover { background: var(--surface-hover); }

/* Inputs */
.input, .select, .textarea, input[type="text"], input[type="email"], input[type="url"], input[type="number"], select, textarea {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-3);
  color: var(--text);
}
.input:focus, .select:focus, .textarea:focus, input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--shadow-focus);
}

/* Badges / pills */
.badge { border-radius: var(--r-pill, 999px); font-weight: 600; }
.badge--violet { background: var(--ai-soft); color: var(--ai-text); }

/* Tables */
table thead th { color: var(--text-3); font-weight: 700; }
table tbody tr { border-top: 1px solid var(--border); }

/* Flash */
.flash--ok  { background: var(--success-soft); color: var(--accent-text); border: 1px solid var(--accent-soft-2); }
.flash--err { background: var(--danger-soft); color: var(--danger); border: 1px solid var(--danger-soft); }

/* The Metta wordmark is dark-on-transparent — keep it legible on the dark theme */
:root[data-theme="dark"] img.brand-mark {
  background: #fff;
  border-radius: var(--r-2);
  padding: 5px 7px;
}