/*
 * platform-tokens.css
 * Africa ESG Intelligence Platform — Canonical Design Token System
 * Phase U5 — Visual System Unification
 *
 * AUTHORITY: This file is the single source of token truth.
 * ALL Tier 2/3/4 pages import this file first.
 * No other file may define new --pt-* variables.
 * No rule sets in this file — token variables only.
 *
 * Import order for operational pages:
 *   1. /assets/platform-tokens.css   ← this file
 *   2. /assets/j1-shared.css         ← shared operational shell
 *   3. page-specific file (if any)
 */

/* ── Inter (single typeface mandate) ─────────────────────────────────────────
   Variable font — weights 300–700, optical size 14–32.
   Monospace fallback for trace IDs and API response blocks only.
*/
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,300..700;1,14..32,300..700&display=swap');

:root {

  /* ══════════════════════════════════════════════════════════════════════════
     TYPOGRAPHY TOKENS
     ══════════════════════════════════════════════════════════════════════════ */

  --pt-font-sans:  'Inter', system-ui, -apple-system, sans-serif;
  --pt-font-mono:  'Cascadia Code', 'Fira Code', 'JetBrains Mono', 'Consolas', monospace;

  /* Scale */
  --pt-text-xs:    0.6875rem;  /* 11px — timestamps, footnotes, badges */
  --pt-text-sm:    0.8125rem;  /* 13px — captions, meta, table cells */
  --pt-text-base:  0.875rem;   /* 14px — body, nav links, form labels */
  --pt-text-md:    1rem;       /* 16px — card content, panel body */
  --pt-text-lg:    1.125rem;   /* 18px — card headings, section labels */
  --pt-text-xl:    1.375rem;   /* 22px — section headings (H2) */
  --pt-text-2xl:   1.75rem;    /* 28px — page titles (H1) */
  --pt-text-3xl:   2.25rem;    /* 36px — display / hero */

  /* Semantic heading sizes */
  --pt-text-display: 2.25rem;  /* 36px */
  --pt-text-h1:    1.75rem;    /* 28px */
  --pt-text-h2:    1.375rem;   /* 22px */
  --pt-text-h3:    1.125rem;   /* 18px */
  --pt-text-h4:    0.9375rem;  /* 15px */
  --pt-text-label: 0.75rem;    /* 12px — uppercase labels */
  --pt-text-code:  0.8125rem;  /* 13px — monospace */

  /* Weights */
  --pt-weight-light:    300;
  --pt-weight-regular:  400;
  --pt-weight-normal:   400;   /* alias for regular */
  --pt-weight-medium:   500;
  --pt-weight-semibold: 600;
  --pt-weight-bold:     700;

  /* Line heights */
  --pt-leading-tight:   1.2;
  --pt-leading-snug:    1.35;
  --pt-leading-base:    1.5;
  --pt-leading-normal:  1.6;
  --pt-leading-relaxed: 1.75;

  /* Letter spacing */
  --pt-tracking-tight:  -0.02em;
  --pt-tracking-normal: 0em;
  --pt-tracking-wide:   0.05em;
  --pt-tracking-wider:  0.08em;
  --pt-tracking-widest: 0.12em;


  /* ══════════════════════════════════════════════════════════════════════════
     COLOR TOKENS — SURFACE PALETTE
     Foundation: premium light-operational surfaces
     ══════════════════════════════════════════════════════════════════════════ */

  --pt-surface-base:         #FFFFFF;               /* primary page background */
  --pt-surface-elevated:     #F8FAFB;               /* panels, cards above base */
  --pt-surface-card:         #F2F6F4;               /* card surface, light green tint */
  --pt-surface-sidebar:      #EEF4F0;               /* console/workspace sidebar */
  --pt-surface-console-bar:  #1A3A2A;               /* narrow console top bar (dark green) */
  --pt-surface-input:        #F5F9F6;               /* form input backgrounds */
  --pt-surface-hover:        rgba(79, 181, 120, 0.06);  /* hover overlay on cards/rows */
  --pt-surface-active:       rgba(79, 181, 120, 0.12);  /* active/selected overlay */
  --pt-surface-overlay:      rgba(0, 0, 0, 0.32);       /* backdrop for panels/drawers */
  --pt-surface-tooltip:      #1C2B2B;               /* tooltip background */


  /* ══════════════════════════════════════════════════════════════════════════
     COLOR TOKENS — PRIMARY ACCENT: VIOLET INTELLIGENCE
     ══════════════════════════════════════════════════════════════════════════ */

  --pt-violet:               #6366F1;               /* primary intelligence accent */
  --pt-violet-soft:          #818CF8;               /* secondary highlights, chart lines */
  --pt-violet-dim:           #4F46E5;               /* pressed/active states */
  --pt-violet-muted:         rgba(99, 102, 241, 0.12);  /* intelligence tag backgrounds */
  --pt-violet-border:        rgba(99, 102, 241, 0.22);  /* intelligence card borders */
  --pt-violet-hover:         rgba(99, 102, 241, 0.08);  /* hover state overlay */
  --pt-violet-light:         rgba(99, 102, 241, 0.15);  /* selection / active tint */


  /* ══════════════════════════════════════════════════════════════════════════
     COLOR TOKENS — SECONDARY ACCENT: ESG GREEN
     ══════════════════════════════════════════════════════════════════════════ */

  --pt-green:                #16A34A;               /* live data, positive ESG, approval */
  --pt-green-bright:         #22C55E;               /* live pulse dot, chart highs */
  --pt-green-soft:           #4ADE80;               /* gradient fills, ESG score bars */
  --pt-green-muted:          rgba(22, 163, 74, 0.10);   /* live badges, active row tints */
  --pt-green-glow:           rgba(74, 222, 128, 0.15);  /* live signal card — restricted */
  --pt-green-border:         rgba(22, 163, 74, 0.22);   /* active/live card borders */
  --pt-green-sidebar:        #1A3A2A;               /* console nav bar (dark green) */
  --pt-green-sidebar-muted:  #2A4A38;               /* sidebar hover/active state */


  /* ══════════════════════════════════════════════════════════════════════════
     COLOR TOKENS — TEXT PALETTE
     ══════════════════════════════════════════════════════════════════════════ */

  --pt-text-primary:         #111827;               /* primary headings and labels */
  --pt-text-body:            #374151;               /* body text, table cell content */
  --pt-text-secondary:       #6B7280;               /* secondary labels, captions, meta */
  --pt-text-muted:           #9CA3AF;               /* placeholder, disabled, timestamps */
  --pt-text-inverse:         #FFFFFF;               /* text on dark surfaces */
  --pt-text-accent:          #6366F1;               /* violet-tinted intelligence labels */
  --pt-text-green:           #15803D;               /* live status text, positive signals */
  --pt-text-nav-light:       #D1FAE5;               /* light text on console bar */
  --pt-text-nav-muted:       #A7F3D0;               /* muted text on console bar */
  --pt-text-tertiary:        #9CA3AF;               /* alias for muted */


  /* ══════════════════════════════════════════════════════════════════════════
     COLOR TOKENS — STATUS / SEMANTIC
     ══════════════════════════════════════════════════════════════════════════ */

  --pt-success:              #16A34A;
  --pt-success-bg:           rgba(22, 163, 74, 0.08);
  --pt-warning:              #D97706;
  --pt-warning-bg:           rgba(217, 119, 6, 0.08);
  --pt-danger:               #DC2626;
  --pt-danger-bg:            rgba(220, 38, 38, 0.08);
  --pt-info:                 #2563EB;
  --pt-info-bg:              rgba(37, 99, 235, 0.08);
  --pt-neutral:              #6B7280;
  --pt-neutral-bg:           rgba(107, 114, 128, 0.08);

  /* Status tokens (semantic aliases) */
  --pt-status-live:          #16A34A;
  --pt-status-live-bg:       rgba(22, 163, 74, 0.08);
  --pt-status-warning:       #D97706;
  --pt-status-warning-bg:    rgba(217, 119, 6, 0.08);
  --pt-status-critical:      #DC2626;
  --pt-status-critical-bg:   rgba(220, 38, 38, 0.08);
  --pt-status-pending:       #6366F1;
  --pt-status-pending-bg:    rgba(99, 102, 241, 0.08);
  --pt-status-stale:         #6B7280;
  --pt-status-stale-bg:      rgba(107, 114, 128, 0.08);
  --pt-status-archived:      #9CA3AF;
  --pt-status-archived-bg:   rgba(156, 163, 175, 0.08);

  /* Intelligence confidence */
  --pt-intel-verified:       #16A34A;
  --pt-intel-high:           #6366F1;
  --pt-intel-moderate:       #D97706;
  --pt-intel-low:            #9CA3AF;
  --pt-intel-unverified:     #DC2626;
  --pt-intel-active:         #0EA5E9;


  /* ══════════════════════════════════════════════════════════════════════════
     COLOR TOKENS — BORDER PALETTE
     ══════════════════════════════════════════════════════════════════════════ */

  --pt-border:               rgba(0, 0, 0, 0.12);
  --pt-border-subtle:        rgba(0, 0, 0, 0.06);
  --pt-border-default:       rgba(0, 0, 0, 0.10);
  --pt-border-medium:        rgba(0, 0, 0, 0.14);
  --pt-border-strong:        rgba(0, 0, 0, 0.22);
  --pt-border-violet:        rgba(99, 102, 241, 0.22);
  --pt-border-green:         rgba(22, 163, 74, 0.22);
  --pt-border-green-muted:   rgba(84, 129, 53, 0.18);
  --pt-border-warning:       rgba(202, 138, 4, 0.35);
  --pt-border-critical:      rgba(185, 28, 28, 0.35);


  /* ══════════════════════════════════════════════════════════════════════════
     COLOR TOKENS — CHART PALETTE
     ══════════════════════════════════════════════════════════════════════════ */

  /* ESG pillars */
  --pt-chart-esg-e:          #16A34A;   /* Environmental */
  --pt-chart-esg-s:          #6366F1;   /* Social */
  --pt-chart-esg-g:          #D97706;   /* Governance */

  /* Comparison palette */
  --pt-chart-compare-a:      #0EA5E9;
  --pt-chart-compare-b:      #8B5CF6;
  --pt-chart-compare-c:      #F59E0B;
  --pt-chart-compare-d:      #EC4899;

  /* Status/monitoring */
  --pt-chart-live:           #22C55E;
  --pt-chart-warning:        #EAB308;
  --pt-chart-critical:       #EF4444;
  --pt-chart-neutral:        #9CA3AF;

  /* Heatmap (5-step green scale) */
  --pt-chart-heat-1:         #DCFCE7;
  --pt-chart-heat-2:         #86EFAC;
  --pt-chart-heat-3:         #4ADE80;
  --pt-chart-heat-4:         #22C55E;
  --pt-chart-heat-5:         #15803D;

  /* Aliases for backward compat */
  --pt-chart-e:              var(--pt-chart-esg-e);
  --pt-chart-s:              var(--pt-chart-esg-s);
  --pt-chart-g:              var(--pt-chart-esg-g);
  --pt-chart-a:              var(--pt-chart-compare-a);
  --pt-chart-b:              var(--pt-chart-compare-b);
  --pt-chart-c:              var(--pt-chart-compare-c);
  --pt-chart-d:              var(--pt-chart-chart-neutral, #6B7280);


  /* ══════════════════════════════════════════════════════════════════════════
     GRADIENT TOKENS
     Permitted uses: ESG score bars, progress indicators, intelligence headers
     NEVER on page backgrounds or decorative elements
     ══════════════════════════════════════════════════════════════════════════ */

  --pt-gradient-esg:         linear-gradient(90deg, #16A34A 0%, #22C55E 60%, #4ADE80 100%);
  --pt-gradient-intel:       linear-gradient(135deg, #6366F1 0%, #818CF8 100%);
  --pt-gradient-neutral:     linear-gradient(90deg, #E5E7EB 0%, #D1D5DB 100%);
  --pt-gradient-console-bar: linear-gradient(90deg, #1A3A2A 0%, #1E4433 100%);


  /* ══════════════════════════════════════════════════════════════════════════
     SHADOW TOKENS
     ══════════════════════════════════════════════════════════════════════════ */

  --pt-shadow-xs:     0 1px 2px rgba(0, 0, 0, 0.05);
  --pt-shadow-sm:     0 1px 4px rgba(0, 0, 0, 0.08);
  --pt-shadow-card:   0 1px 4px rgba(0, 0, 0, 0.06), 0 2px 8px rgba(0, 0, 0, 0.04);
  --pt-shadow-md:     0 4px 12px rgba(0, 0, 0, 0.10);
  --pt-shadow-panel:  0 4px 16px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04);
  --pt-shadow-modal:  0 8px 32px rgba(0, 0, 0, 0.16), 0 2px 8px rgba(0, 0, 0, 0.08);
  --pt-shadow-nav:    0 1px 0 rgba(0, 0, 0, 0.08);
  --pt-shadow-tooltip: 0 2px 8px rgba(0, 0, 0, 0.20);
  --pt-shadow-green:  0 0 16px rgba(74, 222, 128, 0.12);  /* live signal only */


  /* ══════════════════════════════════════════════════════════════════════════
     BORDER RADIUS TOKENS
     ══════════════════════════════════════════════════════════════════════════ */

  --pt-radius-xs:    4px;
  --pt-radius-sm:    6px;
  --pt-radius:       8px;
  --pt-radius-md:    8px;   /* alias */
  --pt-radius-lg:    12px;
  --pt-radius-xl:    16px;
  --pt-radius-pill:  999px;


  /* ══════════════════════════════════════════════════════════════════════════
     SPACING TOKENS
     Base-4 scale. Semantic aliases for common layout roles.
     ══════════════════════════════════════════════════════════════════════════ */

  --pt-space-1:   0.25rem;   /* 4px */
  --pt-space-2:   0.5rem;    /* 8px */
  --pt-space-3:   0.75rem;   /* 12px */
  --pt-space-4:   1rem;      /* 16px */
  --pt-space-5:   1.25rem;   /* 20px */
  --pt-space-6:   1.5rem;    /* 24px */
  --pt-space-8:   2rem;      /* 32px */
  --pt-space-10:  2.5rem;    /* 40px */
  --pt-space-12:  3rem;      /* 48px */
  --pt-space-16:  4rem;      /* 64px */

  /* Semantic spacing aliases */
  --pt-spacing-card-inner:    var(--pt-space-5);   /* 20px — card internal padding */
  --pt-spacing-section:       var(--pt-space-12);  /* 48px — between page sections */
  --pt-spacing-ws-header:     3.5rem;              /* 56px — workspace nav bar height */
  --pt-spacing-sidebar-width: 16rem;               /* 256px — sidebar width */
  /* Short-form aliases */
  --pt-card-inner:    var(--pt-spacing-card-inner);
  --pt-section:       var(--pt-spacing-section);
  --pt-sidebar-width: var(--pt-spacing-sidebar-width);
  --pt-spacing-panel-inner:   var(--pt-space-6);   /* 24px — intelligence panel padding */
  --pt-spacing-table-cell:    var(--pt-space-4);   /* 16px — table cell padding */

  /* Gap aliases */
  --pt-gap-xs:    var(--pt-space-1);
  --pt-gap-sm:    var(--pt-space-2);
  --pt-gap-md:    var(--pt-space-4);
  --pt-gap-lg:    var(--pt-space-6);
  --pt-gap-xl:    var(--pt-space-8);


  /* ══════════════════════════════════════════════════════════════════════════
     MOTION TOKENS
     Restrained. No theatrical animation.
     ══════════════════════════════════════════════════════════════════════════ */

  --pt-motion-fast:      150ms;
  --pt-motion-standard:  250ms;
  --pt-motion-enter:     300ms;
  --pt-motion-exit:      200ms;
  --pt-ease-standard:    cubic-bezier(0.2, 0, 0, 1);
  --pt-ease-decelerate:  cubic-bezier(0, 0, 0.2, 1);
  --pt-ease-accelerate:  cubic-bezier(0.4, 0, 1, 1);


  /* ══════════════════════════════════════════════════════════════════════════
     Z-INDEX TOKENS
     ══════════════════════════════════════════════════════════════════════════ */

  --pt-z-base:    0;
  --pt-z-raised:  10;
  --pt-z-nav:     100;
  --pt-z-overlay: 200;
  --pt-z-panel:   300;
  --pt-z-drawer:  400;
  --pt-z-modal:   500;
  --pt-z-alert:   600;
  --pt-z-tooltip: 700;


  /* ══════════════════════════════════════════════════════════════════════════
     LAYOUT DIMENSION TOKENS
     ══════════════════════════════════════════════════════════════════════════ */

  --pt-nav-h:           3.875rem;   /* 62px — main nav bar */
  --pt-l-nav-h:         3.25rem;    /* 52px — layer nav bar */
  --pt-ws-nav-h:        3.25rem;    /* 52px — workspace nav bar */
  --pt-sidebar-w:       15rem;      /* 240px — sidebar width */
  --pt-sidebar-w-sm:    12.5rem;    /* 200px — compact sidebar */
  --pt-monitoring-h:    1.75rem;    /* 28px — monitoring strip */


  /* ══════════════════════════════════════════════════════════════════════════
     SCROLLBAR TOKEN
     Defined here for reference; implementation in j1-shared.css
     ══════════════════════════════════════════════════════════════════════════ */

  --pt-scrollbar-width:  6px;
  --pt-scrollbar-thumb:  rgba(22, 163, 74, 0.35);
  --pt-scrollbar-thumb-hover: rgba(22, 163, 74, 0.55);


  /* ══════════════════════════════════════════════════════════════════════════
     BACKWARD-COMPATIBILITY ALIASES
     These aliases map legacy token names to the canonical --pt- system.
     Pages that used old names continue to work without modification.
     Remove in a future cleanup phase.
     ══════════════════════════════════════════════════════════════════════════ */

  /* j1 system compat */
  --j1-bg-base:    var(--pt-surface-base);
  --j1-bg-alt:     var(--pt-surface-elevated);
  --j1-bg-panel:   var(--pt-surface-elevated);
  --j1-bg-card:    var(--pt-surface-card);
  --j1-txt-1:      var(--pt-text-primary);
  --j1-txt-2:      var(--pt-text-body);
  --j1-txt-3:      var(--pt-text-secondary);
  --j1-accent:     var(--pt-violet);            /* orange → violet */
  --j1-gold:       var(--pt-green);             /* gold → green */
  --j1-gold-light: var(--pt-green-bright);      /* gold-light → green-bright */
  --j1-green:      var(--pt-green);
  --j1-green-light:var(--pt-green-bright);
  --j1-blue:       var(--pt-info);
  --j1-danger:     var(--pt-danger);
  --j1-amber:      var(--pt-warning);           /* orange alias → warning */
  --j1-purple:     var(--pt-violet);
  --j1-txt-orange: var(--pt-violet);            /* orange text → violet */
  --j1-txt-gold:   var(--pt-text-green);        /* gold text → green text */
  --j1-border:     var(--pt-border-green-muted);
  --j1-border-s:   var(--pt-border-subtle);
  --j1-r:          var(--pt-radius);
  --j1-r-lg:       var(--pt-radius-lg);
  --j1-shadow:     var(--pt-shadow-sm);
  --j1-shadow-md:  var(--pt-shadow-md);
  --j1-nav-h:      var(--pt-nav-h);
  --j1-sidebar-w:  var(--pt-sidebar-w);
  --j1-chart-blue:  var(--pt-chart-compare-a);
  --j1-chart-green: var(--pt-chart-esg-e);
  --j1-surf-orange: var(--pt-violet-muted);     /* orange surf → violet muted */
  --j1-surf-gold:   var(--pt-green-muted);      /* gold surf → green muted */
  --j1-surf-green:  var(--pt-surface-card);
  --j1-surf-blue:   var(--pt-info-bg);

  /* platform-ux / old dark system compat */
  --pf-bg-base:    var(--pt-surface-base);      /* dark black → white */
  --pf-bg-panel:   var(--pt-surface-elevated);
  --pf-bg-card:    var(--pt-surface-card);
  --pf-accent:     var(--pt-violet);            /* gold → violet */
  --pf-gold:       var(--pt-green);
  --pf-green:      var(--pt-green-bright);
  --pf-amber:      var(--pt-warning);
  --pf-danger:     var(--pt-danger);
  --pf-blue:       var(--pt-info);
  --pf-txt-1:      var(--pt-text-primary);
  --pf-txt-2:      var(--pt-text-body);
  --pf-txt-3:      var(--pt-text-secondary);
  --pf-border:     var(--pt-border-default);
  --pf-border-s:   var(--pt-border-subtle);
  --pf-r:          var(--pt-radius);
  --pf-shadow:     var(--pt-shadow-md);

  /* site.css / old dark-green system compat */
  --bg-base:        var(--pt-surface-base);
  --bg-panel:       var(--pt-surface-elevated);
  --bg-card:        var(--pt-surface-card);
  --bg-card-hover:  var(--pt-surface-hover);
  --accent:         var(--pt-violet);            /* gold → violet */
  --green-accent:   var(--pt-green-bright);
  --text-primary:   var(--pt-text-primary);
  --text-secondary: var(--pt-text-body);
  --text-muted:     var(--pt-text-secondary);
  --border:         var(--pt-border-violet);
  --border-subtle:  var(--pt-border-subtle);
  --danger:         var(--pt-danger);
  --radius:         var(--pt-radius);
  --radius-lg:      var(--pt-radius-lg);
  --shadow:         var(--pt-shadow-md);

  /* e2 / platform-visual.css compat */
  --e2-bg-base:    var(--pt-surface-base);
  --e2-bg-panel:   var(--pt-surface-elevated);
  --e2-bg-card:    var(--pt-surface-card);
  --e2-gold:       var(--pt-green);
  --e2-green:      var(--pt-green-bright);
  --e2-amber:      var(--pt-warning);
  --e2-danger:     var(--pt-danger);

  /* ops / platform-operational.css compat */
  --ops-gold:      var(--pt-warning);            /* gold → amber/warning */
  --ops-txt-1:     var(--pt-text-primary);
  --ops-txt-2:     var(--pt-text-body);
  --ops-txt-3:     var(--pt-text-secondary);

}

/*
 * GOVERNANCE NOTES:
 *
 * FORBIDDEN values — never use in any U5+ file:
 *   #ed7d31  (orange — completely banned from all operational UI)
 *   #773e18  (dark orange — banned)
 *   #fae8d5  (orange tint — banned)
 *   #d4af37  (gold — banned; use --pt-green instead)
 *   #D4AF37  (gold upper — banned)
 *   #c9a227  (dark gold — banned)
 *   #06140f  (near-black page bg — banned)
 *   #062E1F  (dark green page bg — banned as full-page background)
 *   #0b1f16  (dark panel bg — banned)
 *   family: Nunito  (banned — Inter only)
 *   family: Arial Rounded  (banned — Inter only)
 *
 * PERMITTED dark surface:
 *   --pt-surface-console-bar (#1A3A2A) — narrow console top bar ONLY
 *   --pt-surface-tooltip (#1C2B2B) — tooltips only
 *
 * PERMITTED glow:
 *   --pt-shadow-green — live signal card and monitoring strip (live state only)
 */