/*! Strand v0.1.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: #fafcfe;
	--strand-surface-elevated: #ffffff;
	--strand-surface-recessed: #f0f4f8;
	--strand-surface-subtle: #e8edf3;

	/* ── BLUE: BIOSYNTHETIC SPECTRUM ── */
	--strand-blue-glow: #e8f4fd;
	--strand-blue-wash: #dbeafe;
	--strand-blue-indicator: #93c5fd;
	--strand-blue-primary: #3b82f6;
	--strand-blue-vivid: #2563eb;
	--strand-blue-deep: #1d4ed8;
	--strand-blue-midnight: #1e3a5f;
	--strand-blue-abyss: #0f172a;

	/* ── COOL GRAYS (blue-shifted) ── */
	--strand-gray-50: #f8fafc;
	--strand-gray-100: #f1f5f9;
	--strand-gray-200: #e2e8f0;
	--strand-gray-300: #cbd5e1;
	--strand-gray-400: #94a3b8;
	--strand-gray-500: #64748b;
	--strand-gray-600: #475569;
	--strand-gray-700: #334155;
	--strand-gray-800: #1e293b;
	--strand-gray-900: #0f172a;

	/* ── 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;

	/* ── ON-COLORS (contrast-safe text pairings) ── */
	--strand-on-surface-primary: #475569;
	--strand-on-surface-elevated: #475569;
	--strand-on-surface-recessed: #475569;
	--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: #0f172a;
	--strand-on-teal-tint: #0d7377;
	--strand-on-amber-caution: #0f172a;
	--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);

	/* ── MOTION: DURATION ── */
	--strand-duration-instant: 75ms;
	--strand-duration-fast: 150ms;
	--strand-duration-normal: 250ms;
	--strand-duration-slow: 400ms;
	--strand-duration-glacial: 700ms;

	/* ── 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);

	/* ── 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;
}