/* =============================================================
 * Pamoja dMRV — Design Tokens
 * Source of truth for colours, type, spacing, radii, shadows.
 *
 * Import: <link rel="stylesheet" href="colors_and_type.css" />
 * ============================================================= */

/* --- Fonts ----------------------------------------------------- */
/* Project-portable: pull from CDN. Swap to self-hosted WOFF2 for production. */
@import url('https://api.fontshare.com/v2/css?f[]=satoshi@400,500,700,800,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&display=swap');

:root {
  /* === BRAND COLOURS ========================================= */
  --pamoja-forest-deep: #022C28;       /* Primary dark: navbar, body text */
  --pamoja-solar-gold:  #F4C300;       /* Primary accent: CTA, P-mark, focus */
  --pamoja-gold-hover:  #D4A800;       /* CTA hover */
  --pamoja-gold-hover-2:#E0B200;       /* CTA hover alt (used on hero) */
  --pamoja-gold-tint:   #FFF8E0;       /* Selected nav bg, gold pill bg */
  --pamoja-gold-text:   #B8960A;       /* WCAG-AA gold text on white */
  --pamoja-gold-text-2: #92400E;       /* Hover variant for gold text */

  --pamoja-charcoal:    #1E1E1E;       /* Secondary text, borders */

  /* === SEMANTIC =============================================== */
  --pamoja-aqua:        #2BC48A;       /* Confirmed, success, active dot */
  --pamoja-aqua-strong: #059669;       /* Stronger success (Puro tag) */
  --pamoja-aqua-tint:   #E6FBF3;       /* Success bg */
  --pamoja-link:        #0077B6;       /* Hyperlinks, Verra, info */
  --pamoja-link-tint:   #E8F4FC;       /* Info bg */
  --pamoja-warning:     #D97706;       /* Flagged */
  --pamoja-warning-tint:#FEF3C7;       /* Warning bg */
  --pamoja-error:       #DC2626;       /* Error */
  --pamoja-error-tint:  #FEE2E2;       /* Error bg */
  --pamoja-purple:      #7C5CFC;       /* Hedera / blockchain commits */
  --pamoja-purple-tint: rgba(124,92,252,0.10);

  /* === NEUTRALS (Tailwind gray scale, restated) =============== */
  --pamoja-white:    #FFFFFF;
  --pamoja-gray-50:  #F9FAFB;
  --pamoja-gray-100: #F3F4F6;
  --pamoja-gray-200: #E5E7EB;
  --pamoja-gray-300: #D1D5DB;
  --pamoja-gray-400: #9CA3AF;
  --pamoja-gray-500: #6B7280;
  --pamoja-gray-600: #4B5563;
  --pamoja-gray-800: #1F2937;
  --pamoja-gray-900: #111827;

  /* === FOREGROUND TOKENS (semantic) =========================== */
  --fg1: var(--pamoja-forest-deep);    /* primary text + dark surfaces */
  --fg2: var(--pamoja-gray-500);       /* secondary text */
  --fg3: var(--pamoja-gray-400);       /* muted / meta */
  --fg-on-dark:        #FFFFFF;
  --fg-on-dark-muted:  rgba(255,255,255,0.7);
  --fg-on-dark-meta:   rgba(255,255,255,0.5);

  /* === BACKGROUND TOKENS ===================================== */
  --bg1: #FFFFFF;                      /* canvas */
  --bg2: var(--pamoja-gray-50);        /* alt section */
  --bg-dark: var(--pamoja-forest-deep);
  --bg-hero-gradient: linear-gradient(135deg, #022C28 0%, #2a2a28 50%, #1a1a18 100%);
  --bg-cta-gradient:  linear-gradient(135deg, #022C28 0%, #2a2a28 100%);

  /* === BORDERS ============================================== */
  --border-default: var(--pamoja-gray-200);
  --border-strong:  var(--pamoja-gray-300);
  --border-focus:   var(--pamoja-solar-gold);
  --border-dark:    rgba(255,255,255,0.15);

  /* === TYPE ================================================= */
  --font-sans: 'Satoshi', 'Manrope', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-bold:    700;
  --fw-black:   900;

  /* === SPACING (4px grid) =================================== */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;   /* card padding */
  --space-8: 32px;   /* section gap */
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  /* === RADII ================================================ */
  --radius-sm:  6px;
  --radius:     10px;   /* signature radius — cards, inputs, buttons */
  --radius-lg:  14px;   /* user-type cards, modals */
  --radius-pill: 9999px;

  /* === SHADOWS (deliberately restrained) ==================== */
  --shadow-none:   none;
  --shadow-card:   0 4px 24px rgba(0,0,0,0.06);     /* login card, key floating cards */
  --shadow-hover:  0 8px 30px rgba(0,0,0,0.06);     /* feature card hover */
  --shadow-lift:   0 12px 40px rgba(0,0,0,0.08);    /* user-type card hover */
  --shadow-gold:   0 8px 30px rgba(244,195,0,0.3);  /* hero CTA hover only */

  /* === FOCUS RING =========================================== */
  --focus-ring: 0 0 0 3px rgba(244,195,0,0.1);

  /* === LAYOUT =============================================== */
  --navbar-h: 60px;
  --sidebar-w: 240px;
  --touch-target: 44px;
  --container-max: 1140px;
  --content-max-narrow: 800px;

  /* === TRANSITIONS ========================================== */
  --t-fast: 150ms ease;
  --t:      200ms ease;
  --t-slow: 300ms ease;
  --t-enter: 600ms ease-out;
}

/* =============================================================
 * SEMANTIC TYPE CLASSES
 * Use these instead of one-off Tailwind ladders.
 * ============================================================= */

.p-h1 {
  font-family: var(--font-sans);
  font-weight: var(--fw-black);
  font-size: clamp(2.5rem, 5vw, 3.8rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--fg1);
}

.p-h2 {
  font-family: var(--font-sans);
  font-weight: var(--fw-black);
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--fg1);
}

.p-h3 {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--fg1);
}

.p-h4 {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: 16px;
  line-height: 1.3;
  color: var(--fg1);
}

.p-h5 {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: 14px;
  line-height: 1.3;
  color: var(--fg1);
}

.p-body {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: 15px;
  line-height: 1.55;
  color: var(--fg2);
}

.p-body-sm {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: 13px;
  line-height: 1.5;
  color: var(--fg2);
}

.p-meta {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: 12px;
  line-height: 1.4;
  color: var(--fg3);
}

/* Tiny uppercase eyebrow / stat label — the brand's most-used micro-style */
.p-eyebrow {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: 11px;
  line-height: 1;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--pamoja-solar-gold);
}

.p-eyebrow--muted {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: 10px;
  line-height: 1;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--pamoja-gray-400);
}

/* Big stat — number on top, uppercase tiny label below */
.p-stat {
  font-family: var(--font-sans);
  font-weight: var(--fw-black);
  font-size: 28px;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--fg1);
}

.p-stat-label {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: 11px;
  line-height: 1;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--pamoja-gray-400);
  margin-top: 4px;
}

/* Monospace — TX IDs, hashes, coordinates */
.p-mono {
  font-family: var(--font-mono);
  font-weight: var(--fw-medium);
  font-size: 12px;
  letter-spacing: 0;
  color: var(--fg1);
}

/* Block-level pull quote (used on login) */
.p-quote {
  font-family: var(--font-sans);
  font-style: italic;
  font-weight: var(--fw-regular);
  font-size: 14px;
  line-height: 1.55;
  color: var(--pamoja-gray-600);
}

/* =============================================================
 * COMPONENT-LEVEL BASE STYLES
 * ============================================================= */

.p-card {
  background: var(--bg1);
  border: 1px solid var(--border-default);
  border-radius: var(--radius);
  padding: var(--space-6);
}

.p-card--hover:hover {
  border-color: var(--pamoja-solar-gold);
  box-shadow: var(--shadow-hover);
}

.p-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--touch-target);
  padding: 12px 24px;
  border-radius: var(--radius);
  border: 1.5px solid transparent;
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: 14px;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background var(--t), border-color var(--t), color var(--t), transform var(--t);
}

.p-btn--primary {
  background: var(--pamoja-solar-gold);
  color: var(--pamoja-forest-deep);
}
.p-btn--primary:hover { background: var(--pamoja-gold-hover); }
.p-btn--primary:active { transform: scale(0.99); }

.p-btn--secondary {
  background: transparent;
  border-color: var(--border-default);
  color: var(--pamoja-forest-deep);
}
.p-btn--secondary:hover { border-color: var(--pamoja-gray-400); }

.p-btn--ghost-dark {
  background: transparent;
  border-color: var(--pamoja-gray-600);
  color: var(--fg-on-dark);
}
.p-btn--ghost-dark:hover { border-color: var(--fg-on-dark); background: rgba(255,255,255,0.05); }

.p-input {
  width: 100%;
  padding: 10px 14px;
  border: 1.5px solid var(--border-default);
  border-radius: var(--radius);
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--fg1);
  background: var(--bg1);
  transition: border-color var(--t), box-shadow var(--t);
}
.p-input:focus {
  outline: none;
  border-color: var(--border-focus);
  box-shadow: var(--focus-ring);
}

.p-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: 11px;
  letter-spacing: 0.01em;
}
.p-badge--green  { background: #D1FAE5; color: #065F46; }
.p-badge--gold   { background: var(--pamoja-gold-tint); color: var(--pamoja-gold-text-2); }
.p-badge--blue   { background: #DBEAFE; color: #1E40AF; }
.p-badge--red    { background: var(--pamoja-error-tint); color: #991B1B; }
.p-badge--amber  { background: var(--pamoja-warning-tint); color: #92400E; }
.p-badge--gray   { background: var(--pamoja-gray-100); color: var(--pamoja-gray-600); }
.p-badge--purple { background: var(--pamoja-purple-tint); color: var(--pamoja-purple); }

/* Status dot — pair inside a badge to convey live/active state */
.p-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  display: inline-block;
}

/* Document field state — the platform's provenance system */
.p-field-state--empty       { border-color: var(--pamoja-gray-200); color: var(--pamoja-gray-400); }
.p-field-state--ai          { border-color: var(--pamoja-link); background: var(--pamoja-link-tint); }
.p-field-state--confirmed   { border-color: var(--pamoja-aqua); background: var(--pamoja-aqua-tint); }
.p-field-state--flagged     { border-color: var(--pamoja-warning); background: var(--pamoja-warning-tint); }
.p-field-state--committed   { border-color: var(--pamoja-purple); background: var(--pamoja-purple-tint); }
.p-field-state--imported    { border-color: #14B8A6; background: #CCFBF1; }
.p-field-state--locked      { border-color: var(--pamoja-gray-400); background: var(--pamoja-gray-100); }