/* Propeller Design System — token source of truth
 * Collections is a sensitive domain. The visual language is calm, clear,
 * credible, and respectful — professional fintech, never aggressive.
 * All text/background pairings below are verified WCAG 2.1 AA (>=4.5:1 normal).
 * Mobile-first; dark mode via prefers-color-scheme; reduced-motion honored.
 */

:root {
  color-scheme: light dark;

  /* ---- Palette: neutrals (slate) ---- */
  --pr-slate-50:  #f8fafc;
  --pr-slate-100: #f1f5f9;
  --pr-slate-200: #e2e8f0;
  --pr-slate-300: #cbd5e1;
  --pr-slate-400: #94a3b8;
  --pr-slate-500: #64748b;
  --pr-slate-600: #475569;
  --pr-slate-700: #334155;
  --pr-slate-800: #1e293b;
  --pr-slate-900: #0f172a;

  /* ---- Palette: primary (indigo) — trust, not aggression ---- */
  --pr-primary-50:  #eef2ff;
  --pr-primary-100: #e0e7ff;
  --pr-primary-300: #a5b4fc;
  --pr-primary-500: #6366f1;
  --pr-primary-600: #4f46e5;  /* white text on this = 6.29:1 AA */
  --pr-primary-700: #4338ca;

  /* ---- Palette: semantic families (tint bg + dark text = AA) ---- */
  --pr-success-50:  #f0fdf4;  --pr-success-700: #15803d;  /* 4.79:1 */
  --pr-warning-50:  #fffbeb;  --pr-warning-800: #92400e;  /* 6.84:1 */
  --pr-danger-50:   #fef2f2;  --pr-danger-700:  #b91c1c;  /* 5.91:1 */
  --pr-info-50:     #eff6ff;  --pr-info-700:    #1d4ed8;  /* 6.16:1 */

  /* ---- Semantic surface + text roles (light) ---- */
  --pr-bg:           var(--pr-slate-50);
  --pr-surface:      #ffffff;
  --pr-surface-alt:  var(--pr-slate-100);
  --pr-border:       var(--pr-slate-200);
  --pr-border-strong:var(--pr-slate-300);

  --pr-text:         var(--pr-slate-900);  /* 17.85:1 on white */
  --pr-text-secondary: var(--pr-slate-600);/* 7.58:1 */
  --pr-text-muted:   var(--pr-slate-500);  /* 4.76:1 */
  --pr-text-on-primary: #ffffff;

  --pr-link:         var(--pr-primary-600);
  --pr-focus-ring:   var(--pr-primary-500);

  /* ---- Status roles (collections workflow) ---- */
  --pr-status-paid-bg:    var(--pr-success-50);  --pr-status-paid-fg:    var(--pr-success-700);
  --pr-status-due-bg:     var(--pr-warning-50);  --pr-status-due-fg:     var(--pr-warning-800);
  --pr-status-escalate-bg:var(--pr-danger-50);   --pr-status-escalate-fg:var(--pr-danger-700);
  --pr-status-pending-bg: var(--pr-info-50);     --pr-status-pending-fg: var(--pr-info-700);

  /* ---- Typography ---- */
  --pr-font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
                  Helvetica, Arial, sans-serif;
  --pr-font-mono: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;

  /* Modular scale (1.200 minor third), mobile-first base 16px */
  --pr-text-xs:   0.75rem;   /* 12 */
  --pr-text-sm:   0.875rem;  /* 14 */
  --pr-text-base: 1rem;      /* 16 */
  --pr-text-lg:   1.125rem;  /* 18 */
  --pr-text-xl:   1.35rem;   /* ~22 */
  --pr-text-2xl:  1.62rem;   /* ~26 */
  --pr-text-3xl:  1.944rem;  /* ~31 */

  --pr-leading-tight: 1.25;
  --pr-leading-normal: 1.5;
  --pr-leading-relaxed: 1.65;
  --pr-weight-regular: 400;
  --pr-weight-medium: 500;
  --pr-weight-semibold: 600;

  /* ---- Spacing (4px base) ---- */
  --pr-space-1: 0.25rem;  --pr-space-2: 0.5rem;  --pr-space-3: 0.75rem;
  --pr-space-4: 1rem;     --pr-space-5: 1.25rem; --pr-space-6: 1.5rem;
  --pr-space-8: 2rem;     --pr-space-10: 2.5rem; --pr-space-12: 3rem;
  --pr-space-16: 4rem;

  /* ---- Radii ---- */
  --pr-radius-sm: 0.25rem; --pr-radius-md: 0.5rem; --pr-radius-lg: 0.75rem;
  --pr-radius-full: 9999px;

  /* ---- Elevation (soft, low-contrast — calm) ---- */
  --pr-shadow-sm: 0 1px 2px rgba(15,23,42,0.06);
  --pr-shadow-md: 0 2px 8px rgba(15,23,42,0.08);
  --pr-shadow-lg: 0 8px 24px rgba(15,23,42,0.12);

  /* ---- Motion ---- */
  --pr-ease: cubic-bezier(0.2, 0, 0, 1);
  --pr-duration-fast: 120ms;
  --pr-duration-base: 200ms;

  /* ---- Layout ---- */
  --pr-container: 72rem;
  --pr-tap-target: 44px;  /* min touch target, mobile-first */
}

/* ---- Dark mode ---- */
@media (prefers-color-scheme: dark) {
  :root {
    --pr-bg:           var(--pr-slate-900);
    --pr-surface:      var(--pr-slate-800);
    --pr-surface-alt:  var(--pr-slate-700);
    --pr-border:       var(--pr-slate-700);
    --pr-border-strong:var(--pr-slate-600);

    --pr-text:         var(--pr-slate-200);  /* 14.48:1 on slate-900 */
    --pr-text-secondary: var(--pr-slate-300);
    --pr-text-muted:   var(--pr-slate-400);  /* 6.96:1 */
    --pr-link:         var(--pr-primary-300);/* 8.96:1 */
    --pr-focus-ring:   var(--pr-primary-300);

    /* status: darker tints, light text for contrast on dark surfaces */
    --pr-status-paid-bg:    #052e16; --pr-status-paid-fg:    #86efac;
    --pr-status-due-bg:     #451a03; --pr-status-due-fg:     #fcd34d;
    --pr-status-escalate-bg:#450a0a; --pr-status-escalate-fg:#fca5a5;
    --pr-status-pending-bg: #172554; --pr-status-pending-fg: #93c5fd;

    --pr-shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
    --pr-shadow-md: 0 2px 8px rgba(0,0,0,0.5);
    --pr-shadow-lg: 0 8px 24px rgba(0,0,0,0.6);
  }
}

@media (prefers-reduced-motion: reduce) {
  :root { --pr-duration-fast: 0ms; --pr-duration-base: 0ms; }
}