/* ═══════════════════════════════════════════════════════════════════════════
   UniLedger App Design System — exact mirror of src/index.css.
   These tokens are the SAME values shipped in the real app at app.uniledger.co.
   When you change them in the app, change them here too.

   Used by:
     • product mocks (dashboard-mock.jsx, product-mocks.jsx) — so the marketing
       imagery matches what the user sees the moment they sign up
     • tool pages (invoice generator, product tour) — actual app experiences
       embedded in the marketing site

   Reference: docs/brand-style-guide.md · docs/design/design-system.md
   ═══════════════════════════════════════════════════════════════════════════ */

:root, .ul-app {
  /* ── Surface & Text ─────────────────────────────────────────────────── */
  --ul-background: hsl(210 20% 97%);          /* #F4F6F8 — page canvas, app shell */
  --ul-foreground: hsl(215 25% 12%);          /* #171F2B — primary text, headings */
  --ul-card: hsl(0 0% 100%);                  /* #FFFFFF — card / modal / popover */
  --ul-card-foreground: hsl(215 25% 12%);     /* #171F2B */
  --ul-popover: hsl(0 0% 100%);
  --ul-popover-foreground: hsl(215 25% 12%);

  /* ── Brand ──────────────────────────────────────────────────────────── */
  --ul-primary: hsl(142 76% 36%);             /* #16A34A — CTAs, active nav, logo accent */
  --ul-primary-foreground: hsl(0 0% 100%);
  --ul-secondary: hsl(138 60% 50%);           /* #33B35C */
  --ul-secondary-foreground: hsl(0 0% 100%);
  --ul-accent: hsl(152 68% 45%);              /* #25B87C — highlights, gradient endpoint */
  --ul-accent-foreground: hsl(0 0% 100%);

  /* ── Neutral ────────────────────────────────────────────────────────── */
  --ul-muted: hsl(210 15% 95%);               /* #EFF1F3 — chip fills, subtle bg */
  --ul-muted-foreground: hsl(215 12% 50%);    /* #727D8B — secondary text, labels */

  /* ── Semantic status (registered Tailwind tokens) ──────────────────── */
  --ul-success: hsl(142 70% 45%);             /* #22A84D — revenue, paid, positive */
  --ul-success-foreground: hsl(0 0% 100%);
  --ul-destructive: hsl(0 85% 60%);           /* #EB4444 — errors, expenses, overdue */
  --ul-destructive-foreground: hsl(0 0% 100%);
  --ul-warning: hsl(38 95% 55%);              /* #F5A623 — low stock, unpaid, attention */
  --ul-warning-foreground: hsl(0 0% 100%);
  --ul-info: hsl(200 80% 50%);                /* #1A9FE0 — in-progress, auto-matched */
  --ul-info-foreground: hsl(0 0% 100%);
  --ul-matched: hsl(270 60% 55%);             /* #8B5CF6 — manual bank match */
  --ul-matched-foreground: hsl(0 0% 100%);

  /* ── Extended status (arbitrary-value tokens, not in Tailwind config) */
  --ul-warning-muted: hsl(25 90% 55%);        /* #E87A2B — "Not supplied" status */
  --ul-orange: hsl(25 95% 53%);               /* #F07623 — payables, orange KPI */
  --ul-orange-foreground: hsl(0 0% 100%);

  /* ── Interactive ────────────────────────────────────────────────────── */
  --ul-border: hsl(210 15% 90%);              /* #DFE3E8 — dividers, card borders */
  --ul-input: hsl(210 15% 93%);               /* #EBEEF1 — input field bg */
  --ul-ring: hsl(200 95% 45%);                /* #0EA5E9 — focus ring */

  /* ── Navigation ─────────────────────────────────────────────────────── */
  --ul-nav-surface: hsl(140 15% 96%);         /* #F2F5F3 — green-tinted neutral */

  /* ── Layout ─────────────────────────────────────────────────────────── */
  --ul-radius: 0.75rem;                        /* 12px — buttons, inputs */
  --ul-radius-card: 1rem;                      /* 16px — cards (rounded-2xl) */
  --ul-shadow-soft:   0 1px 3px 0 rgb(0 0 0 / 0.04), 0 1px 2px -1px rgb(0 0 0 / 0.04);
  --ul-shadow-medium: 0 4px 12px -2px rgb(0 0 0 / 0.06), 0 2px 4px -2px rgb(0 0 0 / 0.04);
  --ul-shadow-strong: 0 8px 24px -4px rgb(0 0 0 / 0.08), 0 4px 8px -4px rgb(0 0 0 / 0.04);
}

/* Page shell */
.ul-app {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  background: var(--ul-background);
  color: var(--ul-foreground);
  min-height: 100vh;
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
.ul-app * { box-sizing: border-box; }
.ul-app a { color: inherit; text-decoration: none; }
.ul-app button { font-family: inherit; cursor: pointer; }

/* Typography */
.ul-h1 { font-size: 30px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; color: var(--ul-foreground); }
.ul-h2 { font-size: 20px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.2; color: var(--ul-foreground); }
.ul-h3 { font-size: 24px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.2; color: var(--ul-foreground); }
.ul-h4 { font-size: 16px; font-weight: 600; color: var(--ul-foreground); }
.ul-body { font-size: 14px; color: var(--ul-foreground); }
.ul-muted { font-size: 14px; color: var(--ul-muted-foreground); }
.ul-caption { font-size: 12px; color: var(--ul-muted-foreground); }

/* Card — matches /components/ui/card.tsx */
.ul-card {
  background: var(--ul-card);
  color: var(--ul-card-foreground);
  border: 1px solid hsl(210 15% 90% / 0.6);
  border-radius: 1rem; /* rounded-2xl */
  box-shadow: var(--ul-shadow-soft);
}
.ul-card-header { padding: 24px; display: flex; flex-direction: column; gap: 6px; }
.ul-card-title { font-size: 24px; font-weight: 600; letter-spacing: -0.01em; line-height: 1; color: var(--ul-foreground); }
.ul-card-title-sm { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; line-height: 1; color: var(--ul-foreground); }
.ul-card-description { font-size: 14px; color: var(--ul-muted-foreground); }
.ul-card-content { padding: 0 24px 24px; }
.ul-card-content-tight { padding: 24px; }
.ul-card-footer { padding: 0 24px 24px; display: flex; align-items: center; }

/* Button — matches /components/ui/button.tsx */
.ul-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  white-space: nowrap;
  border-radius: 0.5rem; /* rounded-md ~ 8px since --radius is 12px and md = radius-2 */
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  transition: background-color 0.15s, color 0.15s, border-color 0.15s, opacity 0.15s;
  border: 1px solid transparent;
  cursor: pointer;
  user-select: none;
}
.ul-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--ul-background), 0 0 0 4px var(--ul-ring);
}
.ul-btn:disabled { opacity: 0.5; pointer-events: none; }
.ul-btn svg { width: 16px; height: 16px; flex-shrink: 0; }

.ul-btn-default {
  background: var(--ul-primary);
  color: var(--ul-primary-foreground);
}
.ul-btn-default:hover { background: hsl(142 76% 32%); }

.ul-btn-outline {
  background: var(--ul-background);
  border-color: var(--ul-input);
  color: var(--ul-foreground);
}
.ul-btn-outline:hover { background: hsl(210 15% 95%); }

.ul-btn-secondary {
  background: var(--ul-muted);
  color: var(--ul-foreground);
}
.ul-btn-secondary:hover { background: hsl(210 15% 92%); }

.ul-btn-ghost {
  background: transparent;
  color: var(--ul-foreground);
}
.ul-btn-ghost:hover { background: hsl(210 15% 95%); }

.ul-btn-destructive {
  background: var(--ul-destructive);
  color: var(--ul-destructive-foreground);
}

.ul-btn-sm { height: 36px; padding: 0 12px; font-size: 13px; }
.ul-btn-md { height: 40px; padding: 0 16px; }
.ul-btn-lg { height: 44px; padding: 0 32px; font-size: 14px; }

/* Input — matches /components/ui/input.tsx */
.ul-input, .ul-select {
  display: flex;
  height: 40px;
  width: 100%;
  border-radius: 0.5rem;
  border: 1px solid var(--ul-input);
  background: var(--ul-card);
  padding: 8px 12px;
  font-size: 14px;
  color: var(--ul-foreground);
  font-family: inherit;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.ul-input::placeholder, .ul-select option:disabled { color: var(--ul-muted-foreground); }
.ul-input:focus, .ul-select:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--ul-background), 0 0 0 4px var(--ul-ring);
}
.ul-textarea {
  display: block;
  width: 100%;
  min-height: 80px;
  border-radius: 0.5rem;
  border: 1px solid var(--ul-input);
  background: var(--ul-card);
  padding: 10px 12px;
  font-size: 14px;
  font-family: inherit;
  color: var(--ul-foreground);
  resize: vertical;
}
.ul-textarea:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--ul-background), 0 0 0 4px var(--ul-ring);
}

/* Label */
.ul-label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 6px;
  color: var(--ul-foreground);
}

/* Radio group — segmented card style used in app */
.ul-radio-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 20px;
  border-radius: 0.75rem;
  border: 1px solid var(--ul-border);
  background: var(--ul-card);
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
  text-align: left;
  width: 100%;
}
.ul-radio-card:hover {
  border-color: hsl(142 76% 36% / 0.4);
  background: hsl(142 76% 36% / 0.02);
}
.ul-radio-card[data-selected="true"] {
  border-color: var(--ul-primary);
  background: hsl(142 76% 36% / 0.04);
  box-shadow: 0 0 0 1px var(--ul-primary) inset;
}
.ul-radio-card-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: hsl(142 76% 36% / 0.1);
  color: var(--ul-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
}
.ul-radio-card-icon svg { width: 20px; height: 20px; }

/* Badge */
.ul-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 500;
  padding: 2px 10px;
  border: 1px solid transparent;
}
.ul-badge-outline { border-color: var(--ul-border); color: var(--ul-foreground); }
.ul-badge-success { background: var(--ul-success); color: var(--ul-success-foreground); }
.ul-badge-warning { background: var(--ul-warning); color: var(--ul-warning-foreground); }

/* App shell top bar (replicates app navigation header) */
.ul-topbar {
  background: var(--ul-card);
  border-bottom: 1px solid var(--ul-border);
  height: 56px;
  display: flex;
  align-items: center;
  padding: 0 24px;
  gap: 16px;
}
.ul-topbar-brand { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.ul-topbar-brand img { width: 22px; height: 22px; border-radius: 5px; }

/* Page container */
.ul-page { padding: 24px; max-width: 1280px; margin: 0 auto; }
.ul-page-narrow { padding: 24px; max-width: 720px; margin: 0 auto; }

/* ───────────────────────────────────────────────────────────────────────
   KPI Card — the signature data-display component.
   Mirrors src/shared/components/KpiCard.tsx.

   Anatomy:
     ┌──────────────────────────┐  border-l-4 in semantic color
     │  ◯ Label                  │  28px tinted icon circle + 12px muted label
     │  ₦45,000                  │  text-xl font-bold value
     │  +12% ▲                   │  text-xs muted subtitle
     └──────────────────────────┘  rounded-2xl, soft shadow, p-4, min-h-104px

   Colors: success · destructive · warning · primary · accent · orange
   ─────────────────────────────────────────────────────────────────────── */

.ul-kpi {
  position: relative;
  background: var(--ul-card);
  border: 1px solid hsl(210 15% 90% / 0.6);
  border-left: 4px solid var(--ul-primary);
  border-radius: var(--ul-radius-card);
  box-shadow: var(--ul-shadow-soft);
  padding: 16px;
  min-height: 104px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  transition: box-shadow 0.18s, transform 0.18s;
}
.ul-kpi--tappable { cursor: pointer; }
.ul-kpi--tappable:hover { box-shadow: var(--ul-shadow-medium); }

.ul-kpi-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.ul-kpi-icon {
  width: 28px; height: 28px; border-radius: 9999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: hsl(142 76% 36% / 0.1);
  color: var(--ul-primary);
  flex-shrink: 0;
}
.ul-kpi-icon svg { width: 14px; height: 14px; }
.ul-kpi-label { font-size: 12px; font-weight: 500; color: var(--ul-muted-foreground); }
.ul-kpi-value { font-size: 20px; font-weight: 700; letter-spacing: -0.01em; color: var(--ul-foreground); line-height: 1.2; font-variant-numeric: tabular-nums; }
.ul-kpi-sub { font-size: 12px; color: var(--ul-muted-foreground); }

/* Semantic variants — drive both the left-border accent and the icon tint */
.ul-kpi-success     { border-left-color: var(--ul-success); }
.ul-kpi-success     .ul-kpi-icon { background: hsl(142 70% 45% / 0.1); color: var(--ul-success); }
.ul-kpi-destructive { border-left-color: var(--ul-destructive); }
.ul-kpi-destructive .ul-kpi-icon { background: hsl(0 85% 60% / 0.1); color: var(--ul-destructive); }
.ul-kpi-warning     { border-left-color: var(--ul-warning); }
.ul-kpi-warning     .ul-kpi-icon { background: hsl(38 95% 55% / 0.1); color: var(--ul-warning); }
.ul-kpi-primary     { border-left-color: var(--ul-primary); }
.ul-kpi-primary     .ul-kpi-icon { background: hsl(142 76% 36% / 0.1); color: var(--ul-primary); }
.ul-kpi-accent      { border-left-color: var(--ul-accent); }
.ul-kpi-accent      .ul-kpi-icon { background: hsl(152 68% 45% / 0.1); color: var(--ul-accent); }
.ul-kpi-orange      { border-left-color: var(--ul-orange); }
.ul-kpi-orange      .ul-kpi-icon { background: hsl(25 95% 53% / 0.1); color: var(--ul-orange); }
.ul-kpi-info        { border-left-color: var(--ul-info); }
.ul-kpi-info        .ul-kpi-icon { background: hsl(200 80% 50% / 0.1); color: var(--ul-info); }

/* KPI grids — mandatory layout per design-system.md §6 */
.ul-kpi-grid       { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ul-kpi-grid-4 > * { }
.ul-kpi-grid-5 > * { }
@media (min-width: 900px) {
  .ul-kpi-grid-4   { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ul-kpi-grid-5   { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* ───────────────────────────────────────────────────────────────────────
   Section card — list-style card (Low Stock, Fast-Moving, Recent Activity)
   Header: text-sm semibold + 28px tinted icon circle + optional pill count
   List items: p-2 rounded-lg bg-muted/50
   ─────────────────────────────────────────────────────────────────────── */
.ul-section {
  background: var(--ul-card);
  border: 1px solid hsl(210 15% 90% / 0.6);
  border-radius: var(--ul-radius-card);
  box-shadow: var(--ul-shadow-soft);
  overflow: hidden;
}
.ul-section-head {
  padding: 16px 20px 12px;
  display: flex; align-items: center; justify-content: space-between;
}
.ul-section-title {
  font-size: 14px; font-weight: 600; letter-spacing: -0.005em;
  color: var(--ul-foreground);
  display: inline-flex; align-items: center; gap: 8px;
}
.ul-section-title .ul-kpi-icon { background: hsl(142 76% 36% / 0.1); color: var(--ul-primary); }
.ul-section-body { padding: 0 20px 20px; display: flex; flex-direction: column; gap: 8px; }
.ul-list-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px;
  background: hsl(210 15% 95% / 0.5);
  border-radius: 8px;
  font-size: 13px;
  min-height: 48px;       /* uniform row height across all section cards */
}

/* The marketing dashboard mock is ALWAYS a desktop screenshot, so the
   5-col KPI grid must not collapse to 2 cols when the iframe is narrow.
   This overrides the viewport-based media query above for any KPI grid
   that lives inside a .ul-app mock. */
.ul-app .ul-kpi-grid-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.ul-app .ul-kpi-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ul-app .ul-kpi-grid   { gap: 10px; }

/* Inside the marketing-page mock dashboard the cards have to live in a
   ~700px column, so squeeze them slightly — same vocabulary, less air. */
.ul-app .ul-kpi {
  padding: 12px;
  min-height: 96px;
}
.ul-app .ul-kpi-value { font-size: 17px; }
.ul-app .ul-kpi-label { font-size: 11px; }
.ul-app .ul-kpi-sub   { font-size: 11px; }

/* Pill badge — rounded-full px-2.5 py-0.5 text-xs */
.ul-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 10px;
  border-radius: 9999px;
  font-size: 11px; font-weight: 500;
  border: 1px solid transparent;
  white-space: nowrap;
}
.ul-pill-success     { background: hsl(142 70% 45% / 0.1); color: var(--ul-success);     border-color: hsl(142 70% 45% / 0.2); }
.ul-pill-warning     { background: hsl(38  95% 55% / 0.1); color: var(--ul-warning);     border-color: hsl(38  95% 55% / 0.2); }
.ul-pill-destructive { background: hsl(0   85% 60% / 0.1); color: var(--ul-destructive); border-color: hsl(0   85% 60% / 0.2); }
.ul-pill-primary     { background: hsl(142 76% 36% / 0.1); color: var(--ul-primary);     border-color: hsl(142 76% 36% / 0.2); }
.ul-pill-orange      { background: hsl(25  95% 53% / 0.1); color: var(--ul-orange);      border-color: hsl(25  95% 53% / 0.2); }
.ul-pill-info        { background: hsl(200 80% 50% / 0.1); color: var(--ul-info);        border-color: hsl(200 80% 50% / 0.2); }

/* Helpers */
.ul-stack { display: flex; flex-direction: column; }
.ul-row { display: flex; align-items: center; }
.ul-grid { display: grid; }
.ul-text-primary { color: var(--ul-primary); }
.ul-text-muted { color: var(--ul-muted-foreground); }
.ul-text-success { color: var(--ul-success); }
.ul-text-destructive { color: var(--ul-destructive); }