/*
 * Dragonfly Design System — Canonical Tokens
 *
 * Single source of truth for all --df-* tokens. Both reference sites
 * and downstream consumer agents @import this file.
 *
 * Narrative authority: ../rules/Dragonfly-Design-System.md
 * Stability contract: ../STABILITY.md
 * Reconciliation notes: ../../TOKENS-RECONCILIATION.md
 *
 * Change rules: any value change here requires a VERSION bump.
 * See ../../VENDOR.md for semver semantics.
 */

:root {
	/* ─── Neutrals (Tailwind Slate — 90% of all colour on any page) ─── */
	--df-slate-950: #0f172a; /* Headings, primary text */
	--df-slate-800: #1e293b; /* Body text, card text — DEFAULT readable text */
	--df-slate-700: #334155; /* Labels, tertiary text */
	--df-slate-600: #475569; /* Links, sidebar descriptions, legend text */
	--df-slate-500: #64748b; /* Metadata, muted text */
	--df-slate-400: #94a3b8; /* Placeholder, divider text */
	--df-slate-300: #cbd5e1; /* Subtle borders */
	--df-slate-200: #e2e8f0; /* Primary borders, dividers */
	--df-slate-100: #f1f5f9; /* Hover states, panel fills */
	--df-slate-50:  #f8f9fb; /* Sidebar bg, subtle panels */
	--df-white:     #fff;    /* Page background */

	/* ─── Brand ─── */
	--df-primary:       #0563FA; /* Dragonfly blue — sole primary; sparing use only */
	--df-primary-hover: #0449c4;
	--df-callout:       #002D9C;

	/* ─── Risk Severity (badges, viz nodes, status indicators) ─── */
	--df-risk-extreme:  #dc2626;
	--df-risk-high:     #ea580c;
	--df-risk-moderate: #d97706;
	--df-risk-low:      #059669;

	/* ─── Confidence (data source signalling) ─── */
	--df-conf-public: #059669;
	--df-conf-gov:    #0563FA;
	--df-conf-est:    #d97706;

	/* ─── Categories (domain colour coding) ─── */
	--df-cat-economic:       #0563FA;
	--df-cat-security:       #dc2626;
	--df-cat-social:         #7c3aed;
	--df-cat-infrastructure: #059669;
	--df-cat-political:      #d97706;

	/* ─── Risk / Reward / Resilience ─── */
	--df-rrr-risk:       #8f2d2d;
	--df-rrr-reward:     #0a6b42;
	--df-rrr-resilience: #145f86;

	/* RRR brand swatch palette (used in design-system-site swatch demo) */
	--df-rrr-red:    #FF0103;
	--df-rrr-green:  #00CA00;
	--df-rrr-navy:   #1C48C5;

	/* ─── Dragonfly Lenses palette (unified --df-lens-*) ─── */
	--df-lens-primary:  #0563FA;
	--df-lens-plum:     #92448A;
	--df-lens-magenta:  #E1208D;
	--df-lens-rose:     #F81369;
	--df-lens-red:      #DA342A;
	--df-lens-red-dm:   #FF252F;
	--df-lens-orange:   #FF9413;
	--df-lens-yellow:   #EFE338;
	--df-lens-gold:     #EFD038;
	--df-lens-green:    #0ABF67;
	--df-lens-teal:     #0BAEA3;
	--df-lens-sky:      #1B99D6;
	--df-lens-cobalt:   #1575BF;
	--df-lens-indigo:   #446BB7;
	--df-lens-graphite: #4B5563; /* Cross-cutting / shared-across-workflows skills (slate-600 family) */

	/* ─── Typography ─── */
	--df-font: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, sans-serif;
	--df-text-h1:    32px;
	--df-text-h2:    22px;
	--df-text-h3:    17px;
	--df-text-h4:    15px;
	--df-text-base:  15px;
	--df-text-sm:    13px;
	--df-text-xs:    12px;
	--df-text-label: 10.5px;
	--df-text-micro: 10px;

	/* ─── Spacing & Layout ─── */
	--df-section-gap:         52px;
	--df-page-padding:        48px;
	--df-page-padding-x:      56px;
	--df-card-padding:        20px;
	--df-sidebar-width:       280px;
	--df-sidebar-right-width: 230px;
	--df-content-max-width:   768px;

	/* ─── Border Radius ─── */
	--df-radius-card:  10px;
	--df-radius-md:    8px;
	--df-radius-sm:    6px;
	--df-radius-badge: 4px;
	--df-radius-xs:    3px;

	/* ─── Shadows ─── */
	--df-shadow-light:   0 1px 3px rgba(0,0,0,0.08);
	--df-shadow-card:    0 2px 8px rgba(0,0,0,0.04);
	--df-shadow-tooltip: 0 4px 12px rgba(0,0,0,0.08);
	--df-shadow-panel:   0 4px 16px rgba(0,0,0,0.08);
}