/* =========================================================================
   Pakka — Colors & Type tokens
   Single source of truth for color, type, spacing, radius, and shadow.
   Mirrors src/constants/colors.ts + src/constants/theme.ts (React Native).
   ========================================================================= */

@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&display=swap");

:root {
  /* ---------- Brand ---------- */
  --pk-primary: #6366F1;          /* Indigo — links, icons, active */
  --pk-primary-light: #818CF8;    /* Hover / focus rings */
  --pk-primary-dark: #4F46E5;     /* Pressed */
  --pk-primary-bg: #EEF2FF;       /* Chip bg, subtle tints */

  --pk-secondary: #0F172A;        /* Navy — app bar, paid status */
  --pk-success: #0F172A;          /* Intentional reuse of navy */

  /* ---------- CTA gradient (Sunset) ---------- */
  --pk-sunset-1: #FFB800;
  --pk-sunset-2: #FF6000;
  --pk-sunset-3: #E8002E;
  --pk-sunset: linear-gradient(95deg, #FFB800 0%, #FF6000 52%, #E8002E 100%);

  /* ---------- Semantic ---------- */
  --pk-warning: #D97706;          /* Partial payments, expiring */
  --pk-danger: #E11D48;           /* Errors, delete, overdue */
  --pk-amber: #F59E0B;            /* Stars, favourites */

  /* ---------- Surfaces ---------- */
  --pk-bg: #F7FAFA;               /* App background */
  --pk-surface: #FFFFFF;          /* Cards */
  --pk-surface-low: #F1F5F5;      /* surfaceContainerLow */

  /* ---------- Text ---------- */
  --pk-text-primary: #131B2E;
  --pk-text-secondary: #6F797A;
  --pk-text-muted: #A8B4B2;

  /* ---------- Border ---------- */
  --pk-border: rgba(188, 201, 198, 0.4);
  --pk-border-strong: rgba(188, 201, 198, 0.7);

  /* ---------- Tints (icon bubbles, chip fills) ---------- */
  --pk-primary-04: rgba(99, 102, 241, 0.04);
  --pk-primary-06: rgba(99, 102, 241, 0.06);
  --pk-primary-08: rgba(99, 102, 241, 0.08);
  --pk-primary-10: rgba(99, 102, 241, 0.10);
  --pk-primary-12: rgba(99, 102, 241, 0.12);
  --pk-secondary-06: rgba(15, 23, 42, 0.06);
  --pk-secondary-10: rgba(15, 23, 42, 0.10);
  --pk-danger-07: rgba(225, 29, 72, 0.07);
  --pk-danger-18: rgba(225, 29, 72, 0.18);

  /* ---------- Status palette (invoices) ---------- */
  --pk-status-draft-fg: var(--pk-text-secondary);
  --pk-status-draft-bg: var(--pk-surface-low);
  --pk-status-sent-fg: var(--pk-primary);
  --pk-status-sent-bg: var(--pk-primary-bg);
  --pk-status-partial-fg: var(--pk-warning);
  --pk-status-partial-bg: #FEF3C7;
  --pk-status-paid-fg: var(--pk-secondary);
  --pk-status-paid-bg: #DCFCE7;
  --pk-status-overdue-fg: var(--pk-danger);
  --pk-status-overdue-bg: #FFF1F2;
  --pk-status-cancelled-fg: #6B7280;
  --pk-status-cancelled-bg: var(--pk-surface-low);

  /* ---------- Aging buckets (cool → hot) ---------- */
  --pk-aging-current: #0F172A;
  --pk-aging-1-30: #D97706;
  --pk-aging-31-60: #F97316;
  --pk-aging-61-90: #E11D48;
  --pk-aging-90-plus: #7C2D12;

  /* ---------- Splash (legacy teal — predates indigo rebrand) ---------- */
  --pk-splash: #0D9488;

  /* =========================================================================
     Type
     Plus Jakarta Sans (display + UI). Inter as numeric/secondary fallback.
     ========================================================================= */
  --pk-font-sans: "Plus Jakarta Sans", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --pk-font-num: "Inter", "Plus Jakarta Sans", system-ui, sans-serif;

  /* Sizes */
  --pk-size-h1: 28px;
  --pk-size-h2: 22px;
  --pk-size-h3: 18px;
  --pk-size-body: 16px;
  --pk-size-caption: 14px;
  --pk-size-small: 12px;
  --pk-size-amount: 24px;
  --pk-size-amount-large: 36px;
  --pk-size-amount-small: 18px;

  /* Line heights */
  --pk-lh-h1: 36px;
  --pk-lh-h2: 28px;
  --pk-lh-h3: 24px;
  --pk-lh-body: 24px;
  --pk-lh-caption: 20px;
  --pk-lh-small: 16px;
  --pk-lh-amount: 32px;
  --pk-lh-amount-large: 44px;

  /* =========================================================================
     Spacing — 4pt grid
     ========================================================================= */
  --pk-space-xs: 4px;
  --pk-space-sm: 8px;
  --pk-space-md: 12px;
  --pk-space-lg: 16px;
  --pk-space-xl: 20px;
  --pk-space-xxl: 24px;
  --pk-space-xxxl: 32px;
  --pk-space-section: 40px;

  /* =========================================================================
     Radii
     ========================================================================= */
  --pk-radius-sm: 6px;
  --pk-radius-md: 8px;   /* buttons */
  --pk-radius-lg: 12px;
  --pk-radius-xl: 16px;  /* cards */
  --pk-radius-full: 9999px;

  /* =========================================================================
     Shadows — color is text-primary navy, not pure black, to keep bg warm.
     ========================================================================= */
  --pk-shadow-sm: 0 1px 2px 0 rgba(19, 27, 46, 0.04);
  --pk-shadow-md: 0 2px 8px 0 rgba(19, 27, 46, 0.06);
  --pk-shadow-lg: 0 0 40px 0 rgba(19, 27, 46, 0.06);
  --pk-shadow-fab: 0 8px 24px -4px rgba(232, 0, 46, 0.35), 0 4px 8px -2px rgba(255, 96, 0, 0.25);
}

/* =========================================================================
   Semantic typography classes — match the Typography tokens 1:1.
   ========================================================================= */
html, body {
  background: var(--pk-bg);
  color: var(--pk-text-primary);
  font-family: var(--pk-font-sans);
  font-size: var(--pk-size-body);
  line-height: var(--pk-lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.pk-h1 {
  font: 700 var(--pk-size-h1) / var(--pk-lh-h1) var(--pk-font-sans);
  letter-spacing: -0.02em;
  color: var(--pk-text-primary);
}
.pk-h2 {
  font: 700 var(--pk-size-h2) / var(--pk-lh-h2) var(--pk-font-sans);
  letter-spacing: -0.015em;
  color: var(--pk-text-primary);
}
.pk-h3 {
  font: 600 var(--pk-size-h3) / var(--pk-lh-h3) var(--pk-font-sans);
  letter-spacing: -0.01em;
  color: var(--pk-text-primary);
}
.pk-body {
  font: 400 var(--pk-size-body) / var(--pk-lh-body) var(--pk-font-sans);
  color: var(--pk-text-primary);
}
.pk-body-bold {
  font: 600 var(--pk-size-body) / var(--pk-lh-body) var(--pk-font-sans);
  color: var(--pk-text-primary);
}
.pk-caption {
  font: 400 var(--pk-size-caption) / var(--pk-lh-caption) var(--pk-font-sans);
  color: var(--pk-text-secondary);
}
.pk-caption-bold {
  font: 600 var(--pk-size-caption) / var(--pk-lh-caption) var(--pk-font-sans);
  color: var(--pk-text-primary);
}
.pk-small {
  font: 400 var(--pk-size-small) / var(--pk-lh-small) var(--pk-font-sans);
  color: var(--pk-text-secondary);
}
.pk-label {
  font: 600 var(--pk-size-small) / var(--pk-lh-small) var(--pk-font-sans);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--pk-text-secondary);
}
.pk-amount {
  font: 700 var(--pk-size-amount) / var(--pk-lh-amount) var(--pk-font-num);
  letter-spacing: -0.02em;
  color: var(--pk-text-primary);
  font-variant-numeric: tabular-nums;
}
.pk-amount-large {
  font: 700 var(--pk-size-amount-large) / var(--pk-lh-amount-large) var(--pk-font-num);
  letter-spacing: -0.025em;
  color: var(--pk-text-primary);
  font-variant-numeric: tabular-nums;
}
.pk-amount-small {
  font: 600 var(--pk-size-amount-small) / var(--pk-lh-amount-small) var(--pk-font-num);
  letter-spacing: -0.01em;
  color: var(--pk-text-primary);
  font-variant-numeric: tabular-nums;
}

/* Sunset gradient text helper */
.pk-text-sunset {
  background: var(--pk-sunset);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}