/* ============================================================
   INSCAPE CORE — shared design system (v1.1)  ·  BILLING copy
   Deployed copy for the BILLING app. Functional CSS is identical
   to the master at /shared/inscape-core.css and to the delivery
   copy at /ins-del/inscape-core.css — edit the master, then
   re-copy into both app folders. Linked BEFORE the app stylesheet:
        <link rel="stylesheet" href="inscape-core.css">
        <link rel="stylesheet" href="inscape-billing-v3.4.css">
   Tokens `--is-*` and classes `is-` never collide with the app's
   own vars/classes; adoption is opt-in, one element at a time.
   ============================================================ */

/* ---------- 1 · CANONICAL TOKENS ---------- */
:root {
  /* Brand + neutrals (values already shared by both apps today) */
  --is-bg:        #f6f7f9;
  --is-surface:   #ffffff;
  --is-surface-2: #f8f9fb;
  --is-surface-3: #eef1f6;
  --is-border:    #e3e7ed;
  --is-border-2:  #c9d1da;
  --is-text:      #0f172a;
  --is-muted:     #64748b;
  --is-muted-2:   #9aa3af;

  /* Semantic accents — ONE meaning per token (no lying names) */
  --is-accent:       #5661c4;  /* indigo — interactive / primary        */
  --is-accent-dark:  #4750a8;
  --is-accent-tint:  #eef0f9;
  --is-success:      #0f766e;  /* teal — money in / settled / paid      */
  --is-success-tint: #e2f3ef;
  --is-info:         #2563eb;  /* blue — bill made, payment pending     */
  --is-info-tint:    #eef4ff;
  --is-danger:       #a85060;  /* wine — due / destructive / money out  */
  --is-danger-tint:  #f8eef1;
  --is-paid:         #166534;  /* green — payment-received toggle ON     */
  --is-paid-tint:    #dcfce7;
  --is-warning:      #b45309;  /* amber — sent but OVERDUE, needs follow-up */
  --is-warning-tint: #fdeccf;

  /* Type */
  --is-font:      'Inter', system-ui, sans-serif;
  --is-font-mono: 'DM Mono', 'JetBrains Mono', ui-monospace, monospace;

  /* Shape + depth */
  --is-radius:    12px;
  --is-radius-sm: 8px;
  --is-shadow:    0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.08);
  --is-shadow-lg: 0 4px 12px rgba(16,24,40,.10), 0 12px 32px rgba(16,24,40,.10);
  --is-ring:      0 0 0 3px rgba(86,97,196,.16);

  /* Rhythm */
  --is-gap: 12px;
  --is-pad: 18px;
}

/* ---------- 2 · SHARED PRIMITIVES (opt-in via `is-` classes) ---------- */

/* Card */
.is-card {
  background: var(--is-surface);
  border: 1px solid var(--is-border);
  border-radius: var(--is-radius);
  padding: var(--is-pad);
  margin-bottom: 14px;
  box-shadow: var(--is-shadow);
}
.is-card-title {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .09em; color: var(--is-muted);
  margin-bottom: 14px; display: flex; align-items: center; gap: 7px;
}
.is-card-title::before {
  content: ''; width: 3px; height: 11px;
  background: var(--is-accent); border-radius: 2px;
}

/* Buttons */
.is-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 10px 16px; border-radius: var(--is-radius-sm);
  font-family: var(--is-font); font-size: 13px; font-weight: 600;
  cursor: pointer; border: 1px solid transparent; transition: background .15s, border-color .15s;
  white-space: nowrap;
}
.is-btn-primary { background: var(--is-accent); color: #fff; }
.is-btn-primary:hover { background: var(--is-accent-dark); }
.is-btn-success { background: var(--is-success); color: #fff; }
.is-btn-ghost   { background: var(--is-surface); color: var(--is-muted); border-color: var(--is-border-2); }
.is-btn-ghost:hover { border-color: var(--is-accent); color: var(--is-accent); }

/* Form field */
.is-field { display: flex; flex-direction: column; gap: 5px; flex: 1; min-width: 140px; }
.is-label { font-size: 12px; font-weight: 600; color: #3d434b; }
.is-input, .is-select, .is-textarea {
  width: 100%; padding: 10px 12px;
  border: 1.5px solid var(--is-border-2); border-radius: var(--is-radius-sm);
  font-size: 14px; font-family: var(--is-font);
  background: #fff; color: var(--is-text); outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.is-input:hover, .is-select:hover, .is-textarea:hover { border-color: #b6bcc4; }
.is-input:focus, .is-select:focus, .is-textarea:focus {
  border-color: var(--is-accent); box-shadow: var(--is-ring);
}
.is-row { display: flex; gap: var(--is-gap); margin-bottom: var(--is-gap); flex-wrap: wrap; }

/* Status badge */
.is-badge {
  display: inline-block; padding: 4px 8px; border-radius: 4px;
  font-size: 11px; font-weight: 600; line-height: 1.6;
}
.is-badge-success { color: var(--is-success); background: var(--is-success-tint); }
.is-badge-info    { color: var(--is-info);    background: var(--is-info-tint); }
.is-badge-danger  { color: var(--is-danger);  background: var(--is-danger-tint); }

/* Quick-action toggle (the Bill / Pay chip pattern) */
.is-toggle {
  display: inline-flex; align-items: center; justify-content: center; gap: 3px;
  padding: 4px 8px; border-radius: 5px; min-height: 28px;
  font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap;
  color: #475569; background: #eef1f5; border: 1px dashed #cbd3dd;
}
.is-toggle:hover { background: #e3e8ef; border-color: #aeb8c6; }
.is-toggle.is-on { color: var(--is-success); background: var(--is-success-tint); border: 1px solid #bfe4db; }
.is-toggle.is-pay.is-on { color: var(--is-paid); background: var(--is-paid-tint); border: 1px solid #bbf7d0; }

/* Toast */
.is-toast {
  position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%) translateY(20px);
  background: var(--is-text); color: #fff; padding: 11px 18px; border-radius: 10px;
  font-size: 13px; font-weight: 500; box-shadow: var(--is-shadow-lg);
  opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 9999;
}
.is-toast.is-on { opacity: 1; transform: translateX(-50%) translateY(0); }
.is-toast.is-err { background: var(--is-danger); }