/* GOZO design tokens — SKETCH / WIREFRAME MODE
   Low-fidelity flat look so reviewers judge the user-flow and business
   process, not the visual design. Clean white surfaces, monochrome
   Tailwind slate for all structure and primary actions, muted Tailwind
   green/red/amber kept ONLY for process status (paid / overdue / pending)
   so flow state stays legible. Palette values from tailwindcss.com/docs/colors.
   Variable names kept from the original handoff so existing pages
   restyle without markup changes (e.g. --gozo-teal is now slate, not orange). */

:root {
  /* Primary action / active state — monochrome slate (no brand hue in sketch). */
  --gozo-teal: #0F172A;            /* slate-900 — primary (legacy name) */
  --gozo-teal-hover: #1E293B;      /* slate-800 */
  --gozo-teal-dark: #0F172A;       /* slate-900 */
  --gozo-teal-dark-2: #334155;     /* slate-700 — gradient stop */
  --gozo-teal-soft: rgba(15, 23, 42, 0.06);   /* icon circle backgrounds */
  --gozo-teal-soft-2: rgba(15, 23, 42, 0.09); /* sidebar active background */
  --gozo-teal-ghost: rgba(15, 23, 42, 0.04);  /* selected pill, light hover */

  /* Neutral — white surfaces, slate borders */
  --gozo-bg: #FFFFFF;              /* desktop main bg */
  --gozo-bg-mobile: #FFFFFF;       /* mobile bg */
  --gozo-card: #FFFFFF;
  --gozo-card-hover: #F8FAFC;      /* slate-50 */
  --gozo-border: #E2E8F0;          /* slate-200 */
  --gozo-border-strong: #CBD5E1;   /* slate-300 */
  --gozo-divider: rgba(15, 23, 42, 0.08);

  /* Text — slate hierarchy */
  --gozo-text: #0F172A;            /* slate-900 */
  --gozo-text-muted: #64748B;      /* slate-500 */
  --gozo-text-soft: #94A3B8;       /* slate-400 */
  --gozo-text-on-teal: #FFFFFF;    /* white ink on slate-900 button */

  /* Status — muted Tailwind hues on light -50 backgrounds (kept for process legibility) */
  --gozo-success-bg: #ECFDF5;      /* emerald-50 */
  --gozo-success: #059669;         /* emerald-600 */
  --gozo-success-text: #047857;    /* emerald-700 */
  --gozo-warning-bg: #FFFBEB;      /* amber-50 */
  --gozo-warning: #D97706;         /* amber-600 */
  --gozo-warning-text: #B45309;    /* amber-700 */
  --gozo-danger-bg: #FEF2F2;       /* red-50 */
  --gozo-danger: #DC2626;          /* red-600 */
  --gozo-danger-text: #B91C1C;     /* red-700 */
  --gozo-info-bg: #F1F5F9;         /* slate-100 */
  --gozo-info: #64748B;            /* slate-500 */
  --gozo-test: #0F172A;            /* TEST badge — neutral slate */
  --gozo-purple-bg: #F1F5F9;       /* slate-100 */
  --gozo-purple: #64748B;          /* slate-500 */

  /* Radius — cards 20px per spec */
  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 20px;
  --r-xl: 24px;
  --r-pill: 999px;

  /* Shadow — flat wireframe: barely-there gray, no glow */
  --sh-card: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.06);
  --sh-card-hover: 0 0 0 1px #CBD5E1, 0 2px 8px rgba(15, 23, 42, 0.08);
  --sh-popover: 0 4px 16px rgba(15, 23, 42, 0.12), 0 1px 4px rgba(15, 23, 42, 0.08);

  /* Typography — one family, Medium (500) + Bold (700) only */
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* Base resets inside artboards */
.gozo {
  font-family: var(--font-sans);
  color: var(--gozo-text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.gozo * { box-sizing: border-box; }
.gozo button { font-family: inherit; cursor: pointer; }
.gozo input, .gozo textarea, .gozo select { font-family: inherit; }

/* Common button styles */
.gz-btn {
  display: inline-flex; align-items: center; gap: 8px;
  height: 40px; padding: 0 18px;
  border-radius: var(--r-pill);
  border: none; font-weight: 700; font-size: 14px;
  background: var(--gozo-teal); color: var(--gozo-text-on-teal);
  transition: background .15s, transform .05s;
}
.gz-btn:hover { background: var(--gozo-teal-hover); }
.gz-btn:active { transform: scale(0.98); }

.gz-btn-ghost {
  background: transparent;
  color: var(--gozo-teal);
  border: 1.5px solid rgba(15, 23, 42, 0.25);
}
.gz-btn-ghost:hover { background: var(--gozo-teal-soft); }

.gz-btn-secondary {
  background: var(--gozo-card);
  color: var(--gozo-text);
  border: 1px solid var(--gozo-border-strong);
}
.gz-btn-secondary:hover { background: var(--gozo-card-hover); }

.gz-btn-danger {
  background: var(--gozo-card);
  color: var(--gozo-danger);
  border: 1px solid var(--gozo-danger-bg);
}

.gz-pill {
  display: inline-flex; align-items: center; gap: 6px;
  height: 24px; padding: 0 10px;
  border-radius: var(--r-pill);
  font-size: 12px; font-weight: 700;
  background: var(--gozo-success-bg); color: var(--gozo-success-text);
}
.gz-pill .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

.gz-input {
  width: 100%; height: 44px; padding: 0 14px;
  border-radius: var(--r-md); border: 1px solid var(--gozo-border);
  background: rgba(255, 255, 255, 0.03); font-size: 14px; color: var(--gozo-text);
  outline: none; transition: border-color .15s, box-shadow .15s;
}
.gz-input:focus { border-color: var(--gozo-teal); box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.12); }
.gz-input::placeholder { color: var(--gozo-text-soft); }

.gz-card {
  background: var(--gozo-card);
  border-radius: var(--r-lg);
  border: 1px solid var(--gozo-border);
}