/*! Strand v0.5.0 | MIT License | dillingerstaffing.com */

:root {
	/* ═══════════════════════════════════════════
     STRAND DESIGN TOKENS
     All values defined in DESIGN_LANGUAGE.md
     ═══════════════════════════════════════════ */

	/* ── FONTS ── */
	--strand-font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
	--strand-font-mono: "JetBrains Mono", "SF Mono", "Fira Code", "Cascadia Code", monospace;

	/* ── SURFACE PALETTE ── */
	--strand-surface-primary: #fafcff;
	--strand-surface-elevated: #ffffff;
	--strand-surface-recessed: #f0f5f8;
	--strand-surface-subtle: #e8eef3;

	/* ── BLUE: BIOSYNTHETIC SPECTRUM ── */
	--strand-blue-glow: #e8f5fd;
	--strand-blue-wash: #dbecfe;
	--strand-blue-indicator: #93ccfd;
	--strand-blue-primary: #3b8ef6;
	--strand-blue-vivid: #2570eb;
	--strand-blue-deep: #1d5ad8;
	--strand-blue-midnight: #1e3e5f;
	--strand-blue-abyss: #0f192a;

	/* ── COOL GRAYS (cyan-shifted) ── */
	--strand-gray-50: #f7fafd;
	--strand-gray-100: #f1f6f9;
	--strand-gray-200: #e2e9f0;
	--strand-gray-300: #cbd6e1;
	--strand-gray-400: #94a5b8;
	--strand-gray-500: #64778b;
	--strand-gray-600: #475769;
	--strand-gray-700: #334355;
	--strand-gray-800: #1e2b3b;
	--strand-gray-900: #0f192a;

	/* ── SEMANTIC ACCENTS ── */
	--strand-cyan-signal: #22d3ee;
	--strand-teal-vital: #14b8a6;
	--strand-green-positive: #10b981;
	--strand-violet-data: #8b5cf6;
	--strand-red-alert: #ef4444;
	--strand-red-alert-vivid: #dc2626;
	--strand-red-alert-deep: #b91c1c;
	--strand-amber-caution: #f59e0b;

	/* ── TINT BACKGROUNDS (light status backgrounds for banners/alerts) ── */
	--strand-blue-tint: #eff6ff;
	--strand-amber-tint: #fef3c7;
	--strand-red-tint: #fef2f2;
	--strand-teal-tint: #ccfbf1;
	--strand-gray-tint: #f1f5f9;

	/* ── ON-COLORS (contrast-safe text pairings) ── */
	--strand-on-surface-primary: #475769;
	--strand-on-surface-elevated: #475769;
	--strand-on-surface-recessed: #475769;
	--strand-on-blue-primary: #ffffff;
	--strand-on-blue-vivid: #ffffff;
	--strand-on-blue-deep: #ffffff;
	--strand-on-red-alert: #ffffff;
	--strand-on-red-alert-vivid: #ffffff;
	--strand-on-red-alert-deep: #ffffff;
	--strand-on-teal-vital: #0f192a;
	--strand-on-teal-tint: #0d7377;
	--strand-on-amber-caution: #0f192a;
	--strand-on-amber-tint: #92400e;
	--strand-on-red-tint: #991b1b;

	/* ── TYPE SCALE (Major Third, 1.250 ratio) ── */
	--strand-text-xs: 0.694rem;
	--strand-text-sm: 0.833rem;
	--strand-text-base: 1rem;
	--strand-text-lg: 1.25rem;
	--strand-text-xl: 1.563rem;
	--strand-text-2xl: 1.953rem;
	--strand-text-3xl: 2.441rem;
	--strand-text-4xl: 3.052rem;
	--strand-text-5xl: 3.815rem;
	--strand-text-6xl: 4.768rem;
	--strand-text-7xl: 5.96rem;

	/* ── TRACKING (letter-spacing) ── */
	--strand-tracking-tightest: -0.05em;
	--strand-tracking-tighter: -0.03em;
	--strand-tracking-tight: -0.02em;
	--strand-tracking-normal: 0;
	--strand-tracking-wide: 0.02em;
	--strand-tracking-wider: 0.05em;
	--strand-tracking-widest: 0.08em;
	--strand-tracking-ultra: 0.12em;

	/* ── LINE HEIGHT ── */
	--strand-leading-none: 1.0;
	--strand-leading-tight: 1.15;
	--strand-leading-snug: 1.25;
	--strand-leading-normal: 1.5;
	--strand-leading-relaxed: 1.625;
	--strand-leading-loose: 1.75;

	/* ── FONT WEIGHT ── */
	--strand-weight-light: 300;
	--strand-weight-regular: 400;
	--strand-weight-medium: 500;
	--strand-weight-semibold: 600;

	/* ── SPACING (4px base unit) ── */
	--strand-space-1: 0.25rem;
	--strand-space-2: 0.5rem;
	--strand-space-3: 0.75rem;
	--strand-space-4: 1rem;
	--strand-space-5: 1.25rem;
	--strand-space-6: 1.5rem;
	--strand-space-8: 2rem;
	--strand-space-10: 2.5rem;
	--strand-space-12: 3rem;
	--strand-space-16: 4rem;
	--strand-space-20: 5rem;
	--strand-space-24: 6rem;
	--strand-space-32: 8rem;
	--strand-space-40: 10rem;
	--strand-space-48: 12rem;

	/* ── MOTION: EASING ── */
	--strand-ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
	--strand-ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
	--strand-ease-in-out-sine: cubic-bezier(0.37, 0, 0.63, 1);
	--strand-ease-in-expo: cubic-bezier(0.7, 0, 0.84, 0);
	/* Spring overshoot (DL Part VI: alive signal). Used by FUI elements
     that "land" with momentum, e.g. instrument viewport map pins. */
	--strand-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

	/* ── MOTION: DURATION ── */
	--strand-duration-instant: 75ms;
	--strand-duration-fast: 150ms;
	--strand-duration-normal: 250ms;
	--strand-duration-slow: 400ms;
	--strand-duration-glacial: 700ms;
	/* Cinematic durations (DL Part VI.4 alive signal). Used by ambient
     FUI animations: scanlines, beacon rings, slow breathing pulses. */
	--strand-duration-cinematic: 1500ms;
	--strand-duration-cinematic-slow: 2500ms;

	/* ── ELEVATION (box-shadow) ── */
	--strand-elevation-0: none;
	--strand-elevation-1: 0 1px 2px rgba(15, 23, 42, 0.04), 0 4px 12px rgba(15, 23, 42, 0.02);
	--strand-elevation-2: 0 4px 6px rgba(15, 23, 42, 0.04), 0 12px 24px rgba(15, 23, 42, 0.06);
	--strand-elevation-3: 0 8px 16px rgba(15, 23, 42, 0.06), 0 24px 48px rgba(15, 23, 42, 0.08);
	--strand-elevation-4: 0 16px 32px rgba(15, 23, 42, 0.08), 0 32px 64px rgba(15, 23, 42, 0.12);

	/* ── ELEVATION: WARM VARIANTS (DL Part 7.1b) ──
     Additive warm-wood shadow tint at 0.025 alpha. Used on showcase
     contexts (hero cards, gallery cards, intent cards) where the
     "warm wood under controlled daylight" spatial signature should
     be felt. Default cool layers preserved alongside the warm layer. */
	--strand-elevation-1-warm: 0 1px 2px rgba(15, 23, 42, 0.04), 0 4px 12px rgba(15, 23, 42, 0.02), 0
		2px 8px rgba(74, 62, 47, 0.025);
	--strand-elevation-2-warm: 0 4px 6px rgba(15, 23, 42, 0.04), 0 12px 24px rgba(15, 23, 42, 0.06), 0
		6px 16px rgba(74, 62, 47, 0.025);
	--strand-elevation-3-warm: 0 8px 16px rgba(15, 23, 42, 0.06), 0 24px 48px rgba(15, 23, 42, 0.08),
		0 12px 32px rgba(74, 62, 47, 0.025);

	/* ── INTERACTION: FOCUS ── */
	--strand-focus-ring: 0 0 0 3px rgba(59, 130, 246, 0.1);
	--strand-focus-ring-error: 0 0 0 3px rgba(239, 68, 68, 0.1);

	/* ── INTERACTION: HOVER SHADOWS ── */
	--strand-hover-shadow-primary: 0 4px 12px rgba(37, 99, 235, 0.2);
	--strand-hover-shadow-danger: 0 4px 12px rgba(239, 68, 68, 0.2);

	/* ── INTERACTION: BACKDROP ── */
	--strand-backdrop: rgba(15, 23, 42, 0.5);

	/* ── SHAPE (border-radius) ── */
	--strand-radius-sm: 4px;
	--strand-radius-md: 6px;
	--strand-radius-lg: 8px;
	--strand-radius-xl: 12px;
	--strand-radius-full: 9999px;

	/* ── LAYOUT: BREAKPOINTS ── */
	--strand-breakpoint-sm: 640px;
	--strand-breakpoint-md: 768px;
	--strand-breakpoint-lg: 1024px;
	--strand-breakpoint-xl: 1280px;

	/* ── LAYOUT: CONTENT WIDTHS ── */
	--strand-content-narrow: 640px;
	--strand-content-default: 768px;
	--strand-content-wide: 1024px;
	--strand-content-full: 1280px;

	/* ── ACCESSIBILITY ── */
	--strand-touch-target: 44px;

	/* ── COMPONENT SIZES ── */
	--strand-nav-height: 64px;
	--strand-control-size: 18px;

	/* ── ANIMATION: STAGGER ── */
	--strand-stagger-delay: 80ms;

	/* ── SURFACE: VIEWPORT ── */
	--strand-viewport-grid-opacity: 0.04;
	--strand-viewport-grid-size: 40px;

	/* ── SURFACE: BORDERS & SHADOWS ── */
	--strand-border-subtle: rgba(148, 163, 184, 0.12);
	--strand-shadow-inset: inset 0 1px 3px rgba(15, 23, 42, 0.06);

	/* ── SURFACE: GLASS (DL Part 9.5) ──
     Frosted-glass treatment for surfaces above content (nav, modal
     headers, sticky toolbars, frosted viewports). The "glass walls
     with controlled daylight" from the spatial signature in Part I. */
	--strand-glass-bg: rgba(250, 252, 254, 0.72);
	--strand-glass-border: rgba(148, 163, 184, 0.12);
	--strand-glass-blur: 12px;

	/* ── SURFACE: WARM RADIAL (DL Part 9.1 warm variant) ──
     The "warm wood underfoot" radial that anchors the warm lab
     surface variant. Below 0.02 alpha is non-negotiable. */
	--strand-warm-radial: rgba(74, 62, 47, 0.015);

	/* ── SURFACE: GRID LINES (DL Part 9.3 instrument viewport) ──
     The blue grid line color for instrument viewport backgrounds.
     Replaces the previous raw rgba in component CSS. */
	--strand-viewport-grid-line: rgba(59, 142, 246, 0.04);

	/* ── NAV: SCROLLED STATE (DL Part XIX.1) ──
     The scrolled-nav border tint. Replaces the previous raw rgba
     in strand-ui.css line 1523. */
	--strand-nav-scrolled-border: rgba(59, 130, 246, 0.12);

	/* ── INSTRUMENT VIEWPORT: FULL-BLEED FUI (DL Part 9.3) ──
     Tokens for the full-bleed dark instrument viewport surface.
     The "dark instrument cabinet inside the white lab" from the
     spatial signature. JOBINT, real-time dashboards, terminal
     output, FUI overlays. The surface is the only place dark
     backgrounds appear. */
	--strand-instrument-bg: #0f192a;
	--strand-instrument-bg-translucent: rgba(15, 25, 42, 0.94);
	--strand-instrument-bg-glass: rgba(15, 25, 42, 0.88);
	--strand-instrument-bg-overlay: rgba(15, 25, 42, 0.6);
	--strand-instrument-border: rgba(59, 142, 246, 0.12);
	--strand-instrument-border-strong: rgba(59, 142, 246, 0.4);
	--strand-instrument-glow-soft: rgba(59, 142, 246, 0.04);
	--strand-instrument-glow-medium: rgba(59, 142, 246, 0.08);
	--strand-instrument-glow-strong: rgba(59, 142, 246, 0.5);
	--strand-instrument-text-primary: #ffffff;
	--strand-instrument-text-secondary: rgba(148, 163, 184, 0.7);
	--strand-instrument-text-tertiary: rgba(148, 163, 184, 0.5);
	--strand-instrument-text-quiet: rgba(148, 163, 184, 0.35);
	--strand-instrument-shadow-deep: 0 4px 32px rgba(0, 0, 0, 0.5);
	--strand-instrument-shadow-medium: 0 4px 24px rgba(0, 0, 0, 0.4);
	--strand-instrument-shadow-soft: 0 4px 16px rgba(0, 0, 0, 0.2);
	--strand-instrument-shadow-inset: inset 0 0 12px rgba(0, 0, 0, 0.2);

	/* ── INSTRUMENT SECTOR PALETTE ──
     Four colors for category encoding inside an instrument viewport.
     Blue Discipline (Part III.4) is preserved at the page level;
     these are the four allowed accents WHEN multi-category encoding
     is the instrument's purpose (e.g. a job market map). The four
     are blue (technology), teal (vital/health), cyan (signal/trades),
     violet (data/finance) -- all from the existing semantic palette. */
	--strand-sector-tech: var(--strand-blue-primary);
	--strand-sector-health: var(--strand-teal-vital);
	--strand-sector-trades: var(--strand-cyan-signal);
	--strand-sector-finance: var(--strand-violet-data);
}