diff --git a/public/css/tractatus-theme.css b/public/css/tractatus-theme.css
index 60b31b9e..2e5afc22 100644
--- a/public/css/tractatus-theme.css
+++ b/public/css/tractatus-theme.css
@@ -649,6 +649,71 @@ h3 { letter-spacing: -0.015em; }
   background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
 }
 
+/* Tailwind Gradient Utilities (not in compiled tailwind.css) */
+.bg-gradient-to-r { background-image: linear-gradient(to right, var(--tw-gradient-stops)); }
+.bg-gradient-to-br { background-image: linear-gradient(to bottom right, var(--tw-gradient-stops)); }
+.bg-gradient-to-b { background-image: linear-gradient(to bottom, var(--tw-gradient-stops)); }
+
+/* From colors */
+.from-blue-50 { --tw-gradient-from: #eff6ff; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(239,246,255,0)); }
+.from-blue-600 { --tw-gradient-from: #2563eb; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(37,99,235,0)); }
+.from-blue-900 { --tw-gradient-from: #1e3a8a; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(30,58,138,0)); }
+.from-emerald-500 { --tw-gradient-from: #10b981; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(16,185,129,0)); }
+.from-indigo-50 { --tw-gradient-from: #eef2ff; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(238,242,255,0)); }
+.from-indigo-500 { --tw-gradient-from: #6366f1; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(99,102,241,0)); }
+.from-indigo-600 { --tw-gradient-from: #4f46e5; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(79,70,229,0)); }
+.from-amber-50 { --tw-gradient-from: #fffbeb; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(255,251,235,0)); }
+.from-amber-500 { --tw-gradient-from: #f59e0b; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(245,158,11,0)); }
+.from-purple-50 { --tw-gradient-from: #faf5ff; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(250,245,255,0)); }
+.from-purple-500 { --tw-gradient-from: #a855f7; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(168,85,247,0)); }
+.from-purple-600 { --tw-gradient-from: #9333ea; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(147,51,234,0)); }
+.from-rose-500 { --tw-gradient-from: #f43f5e; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(244,63,94,0)); }
+.from-teal-50 { --tw-gradient-from: #f0fdfa; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(240,253,250,0)); }
+.from-teal-500 { --tw-gradient-from: #14b8a6; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(20,184,166,0)); }
+.from-teal-600 { --tw-gradient-from: #0d9488; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(13,148,136,0)); }
+.from-teal-700 { --tw-gradient-from: #0f766e; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(15,118,110,0)); }
+.from-yellow-50 { --tw-gradient-from: #fefce8; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(254,252,232,0)); }
+.from-orange-50 { --tw-gradient-from: #fff7ed; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(255,247,237,0)); }
+.from-gray-50 { --tw-gradient-from: #f9fafb; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(249,250,251,0)); }
+.from-gray-800 { --tw-gradient-from: #1f2937; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(31,41,55,0)); }
+.from-green-50 { --tw-gradient-from: #f0fdf4; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(240,253,244,0)); }
+.from-sky-500 { --tw-gradient-from: #0ea5e9; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(14,165,233,0)); }
+.from-pink-50 { --tw-gradient-from: #fdf2f8; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(253,242,248,0)); }
+.from-pink-500 { --tw-gradient-from: #ec4899; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(236,72,153,0)); }
+
+/* Via colors */
+.via-blue-50 { --tw-gradient-stops: var(--tw-gradient-from), #eff6ff, var(--tw-gradient-to, rgba(239,246,255,0)); }
+.via-blue-700 { --tw-gradient-stops: var(--tw-gradient-from), #1d4ed8, var(--tw-gradient-to, rgba(29,78,216,0)); }
+.via-teal-50 { --tw-gradient-stops: var(--tw-gradient-from), #f0fdfa, var(--tw-gradient-to, rgba(240,253,250,0)); }
+.via-teal-800 { --tw-gradient-stops: var(--tw-gradient-from), #115e59, var(--tw-gradient-to, rgba(17,94,89,0)); }
+
+/* To colors */
+.to-blue-50 { --tw-gradient-to: #eff6ff; }
+.to-blue-600 { --tw-gradient-to: #2563eb; }
+.to-blue-700 { --tw-gradient-to: #1d4ed8; }
+.to-purple-50 { --tw-gradient-to: #faf5ff; }
+.to-purple-600 { --tw-gradient-to: #9333ea; }
+.to-purple-700 { --tw-gradient-to: #7e22ce; }
+.to-purple-900 { --tw-gradient-to: #581c87; }
+.to-emerald-50 { --tw-gradient-to: #ecfdf5; }
+.to-emerald-600 { --tw-gradient-to: #059669; }
+.to-emerald-700 { --tw-gradient-to: #047857; }
+.to-emerald-800 { --tw-gradient-to: #065f46; }
+.to-indigo-50 { --tw-gradient-to: #eef2ff; }
+.to-indigo-600 { --tw-gradient-to: #4f46e5; }
+.to-amber-600 { --tw-gradient-to: #d97706; }
+.to-rose-600 { --tw-gradient-to: #e11d48; }
+.to-teal-50 { --tw-gradient-to: #f0fdfa; }
+.to-teal-600 { --tw-gradient-to: #0d9488; }
+.to-orange-50 { --tw-gradient-to: #fff7ed; }
+.to-cyan-600 { --tw-gradient-to: #0891b2; }
+.to-green-50 { --tw-gradient-to: #f0fdf4; }
+.to-red-50 { --tw-gradient-to: #fef2f2; }
+.to-violet-600 { --tw-gradient-to: #7c3aed; }
+.to-gray-100 { --tw-gradient-to: #f3f4f6; }
+.to-gray-900 { --tw-gradient-to: #111827; }
+.to-pink-600 { --tw-gradient-to: #db2777; }
+
 /* Text Shadows */
 .text-shadow-sm {
   text-shadow: 0 1px 2px rgba(0,0,0,0.1);
diff --git a/public/css/tractatus-theme.min.css b/public/css/tractatus-theme.min.css
index a2e9ef06..def696c7 100644
--- a/public/css/tractatus-theme.min.css
+++ b/public/css/tractatus-theme.min.css
@@ -1 +1 @@
-:root{--tractatus-core-start:#64ffda;--tractatus-core-mid:#448aff;--tractatus-core-end:#0891b2;--service-boundary-light:#10b981;--service-boundary-dark:#059669;--service-instruction-light:#6366f1;--service-instruction-dark:#4f46e5;--service-validator-light:#8b5cf6;--service-validator-dark:#7c3aed;--service-pressure-light:#f59e0b;--service-pressure-dark:#d97706;--service-metacognitive-light:#ec4899;--service-metacognitive-dark:#db2777;--service-deliberation-light:#14b8a6;--service-deliberation-dark:#0f766e;--bg-primary:#ffffff;--bg-secondary:#f8fafc;--bg-tertiary:#f1f5f9;--text-primary:#0f172a;--text-secondary:#475569;--text-tertiary:#94a3b8;--border-light:#e2e8f0;--border-medium:#cbd5e1;--border-dark:#94a3b8;--bg-primary-dark:#0f172a;--bg-secondary-dark:#1e293b;--text-primary-dark:#f8fafc;--success:#10b981;--success-light:#d1fae5;--success-dark:#065f46;--warning:#f59e0b;--warning-light:#fef3c7;--warning-dark:#92400e;--error:#ef4444;--error-light:#fee2e2;--error-dark:#991b1b;--info:#0ea5e9;--info-light:#e0f2fe;--info-dark:#075985;--font-display:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;--font-body:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;--font-mono:'SF Mono',Monaco,'Cascadia Code',monospace;--font-light:300;--font-normal:400;--font-medium:500;--font-semibold:600;--font-bold:700;--font-extrabold:800;--gradient-hero:linear-gradient(135deg,#64ffda 0%,#448aff 50%,#0ea5e9 100%);--gradient-primary-btn:linear-gradient(135deg,#0ea5e9 0%,#0284c7 100%);--gradient-btn-boundary:linear-gradient(135deg,#10b981 0%,#059669 100%);--gradient-btn-instruction:linear-gradient(135deg,#6366f1 0%,#4f46e5 100%);--gradient-btn-validator:linear-gradient(135deg,#8b5cf6 0%,#7c3aed 100%);--gradient-btn-pressure:linear-gradient(135deg,#f59e0b 0%,#d97706 100%);--gradient-btn-metacognitive:linear-gradient(135deg,#ec4899 0%,#db2777 100%);--gradient-btn-deliberation:linear-gradient(135deg,#14b8a6 0%,#0d9488 100%);--gradient-all-services:linear-gradient(90deg,#10b981 0%,#6366f1 20%,#8b5cf6 40%,#f59e0b 60%,#ec4899 80%,#14b8a6 100% );--spacing-xs:0.25rem;--spacing-sm:0.5rem;--spacing-md:1rem;--spacing-lg:1.5rem;--spacing-xl:2rem;--spacing-2xl:3rem;--spacing-3xl:4rem;--radius-sm:0.25rem;--radius-md:0.5rem;--radius-lg:0.75rem;--radius-xl:1rem;--radius-2xl:1.5rem;--radius-full:9999px;--shadow-sm:0 1px 2px 0 rgba(0,0,0,0.05);--shadow-md:0 4px 6px -1px rgba(0,0,0,0.1),0 2px 4px -1px rgba(0,0,0,0.06);--shadow-lg:0 10px 15px -3px rgba(0,0,0,0.1),0 4px 6px -2px rgba(0,0,0,0.05);--shadow-xl:0 20px 25px -5px rgba(0,0,0,0.1),0 10px 10px -5px rgba(0,0,0,0.04);--shadow-2xl:0 25px 50px -12px rgba(0,0,0,0.25);--transition-fast:150ms cubic-bezier(0.4,0,0.2,1);--transition-normal:300ms cubic-bezier(0.4,0,0.2,1);--transition-slow:500ms cubic-bezier(0.4,0,0.2,1);--z-base:0;--z-dropdown:1000;--z-sticky:1020;--z-fixed:1030;--z-modal-backdrop:1040;--z-modal:1050;--z-popover:1060;--z-tooltip:1070}.accent-boundary{border-left-color:var(--service-boundary-light)}.accent-instruction{border-left-color:var(--service-instruction-light)}.accent-validator{border-left-color:var(--service-validator-light)}.accent-pressure{border-left-color:var(--service-pressure-light)}.accent-metacognitive{border-left-color:var(--service-metacognitive-light)}.accent-deliberation{border-left-color:var(--service-deliberation-light)}.text-boundary{color:var(--service-boundary-light)}.text-instruction{color:var(--service-instruction-light)}.text-validator{color:var(--service-validator-light)}.text-pressure{color:var(--service-pressure-light)}.text-metacognitive{color:var(--service-metacognitive-light)}.text-deliberation{color:var(--service-deliberation-light)}.bg-boundary{background-color:var(--service-boundary-light)}.bg-instruction{background-color:var(--service-instruction-light)}.bg-validator{background-color:var(--service-validator-light)}.bg-pressure{background-color:var(--service-pressure-light)}.bg-metacognitive{background-color:var(--service-metacognitive-light)}.bg-deliberation{background-color:var(--service-deliberation-light)}.bg-gradient-hero{background:var(--gradient-hero)}.bg-gradient-all-services{background:var(--gradient-all-services)}.btn-base{font-weight:var(--font-semibold);padding:0.75rem 2rem;border-radius:var(--radius-md);transition:all var(--transition-normal);box-shadow:var(--shadow-md)}.btn-base:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px)}.btn-primary{background:var(--gradient-primary-btn);color:white}.btn-boundary{background:var(--gradient-btn-boundary);color:white}.btn-instruction{background:var(--gradient-btn-instruction);color:white}.btn-validator{background:var(--gradient-btn-validator);color:white}.btn-pressure{background:var(--gradient-btn-pressure);color:white}.btn-metacognitive{background:var(--gradient-btn-metacognitive);color:white}.btn-deliberation{background:var(--gradient-btn-deliberation);color:white}.card-base{background:var(--bg-primary);border-radius:var(--radius-xl);box-shadow:var(--shadow-md);padding:2rem;transition:all var(--transition-normal)}.card-interactive:hover{box-shadow:var(--shadow-xl);transform:translateY(-4px)}.card-service{border-left:4px solid transparent}.card-service.boundary{border-left-color:var(--service-boundary-light)}.card-service.instruction{border-left-color:var(--service-instruction-light)}.card-service.validator{border-left-color:var(--service-validator-light)}.card-service.pressure{border-left-color:var(--service-pressure-light)}.card-service.metacognitive{border-left-color:var(--service-metacognitive-light)}.card-service.deliberation{border-left-color:var(--service-deliberation-light)}.text-display-sm{font-size:clamp(2.5rem,5vw,3.5rem);font-family:var(--font-display)}.text-display-md{font-size:clamp(3rem,6vw,4.5rem);font-family:var(--font-display)}.text-display-lg{font-size:clamp(3.5rem,8vw,6rem);font-family:var(--font-display)}h1,h2,h3,h4,h5,h6{font-family:var(--font-display);font-weight:700}h1{letter-spacing:-0.025em}h2{letter-spacing:-0.02em}h3{letter-spacing:-0.015em}@keyframes fadeIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeInScale{from{opacity:0;transform:scale(0.95)}to{opacity:1;transform:scale(1)}}@keyframes slideInLeft{from{opacity:0;transform:translateX(-30px)}to{opacity:1;transform:translateX(0)}}@keyframes slideInRight{from{opacity:0;transform:translateX(30px)}to{opacity:1;transform:translateX(0)}}@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.7}}.animate-fade-in{animation:fadeIn 0.6s ease-out}.animate-fade-in-scale{animation:fadeInScale 0.5s ease-out}.animate-slide-in-left{animation:slideInLeft 0.6s ease-out}.animate-slide-in-right{animation:slideInRight 0.6s ease-out}.animate-pulse{animation:pulse 2s ease-in-out infinite}.animate-delay-100{animation-delay:100ms}.animate-delay-200{animation-delay:200ms}.animate-delay-300{animation-delay:300ms}.animate-delay-400{animation-delay:400ms}.animate-delay-500{animation-delay:500ms}.hover-lift{transition:transform var(--transition-normal),box-shadow var(--transition-normal)}.hover-lift:hover{transform:translateY(-4px)}.hover-scale{transition:transform var(--transition-normal)}.hover-scale:hover{transform:scale(1.05)}.hover-glow{transition:box-shadow var(--transition-normal)}.hover-glow:hover{box-shadow:0 0 20px rgba(14,165,233,0.3)}*:focus-visible{outline:3px solid var(--tractatus-core-end);outline-offset:2px}@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important}}.spinner{width:40px;height:40px;border:4px solid var(--border-light);border-top-color:var(--tractatus-core-end);border-radius:50%;animation:spin 0.8s linear infinite}.spinner-sm{width:20px;height:20px;border-width:2px}.spinner-lg{width:60px;height:60px;border-width:6px}@keyframes spin{to{transform:rotate(360deg)}}.loading-overlay{position:absolute;inset:0;background:rgba(255,255,255,0.9);backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center;z-index:50}.loading-overlay-dark{background:rgba(15,23,42,0.9)}.skeleton{background:linear-gradient( 90deg,var(--bg-secondary) 0%,var(--bg-tertiary) 50%,var(--bg-secondary) 100% );background-size:200% 100%;animation:skeleton-loading 1.5s ease-in-out infinite;border-radius:0.375rem}@keyframes skeleton-loading{0%{background-position:200% 0}100%{background-position:-200% 0}}.skeleton-text{height:1rem;margin-bottom:0.5rem}.skeleton-heading{height:2rem;width:60%;margin-bottom:1rem}.loading-dots{display:inline-flex;gap:0.5rem}.loading-dots span{width:8px;height:8px;border-radius:50%;background:var(--tractatus-core-end);animation:loading-dots 1.4s ease-in-out infinite}.loading-dots span:nth-child(2){animation-delay:0.2s}.loading-dots span:nth-child(3){animation-delay:0.4s}@keyframes loading-dots{0%,80%,100%{opacity:0.3;transform:scale(0.8)}40%{opacity:1;transform:scale(1)}}.text-tractatus-link{color:var(--tractatus-core-end)}.text-service-boundary{color:var(--service-boundary-light)}.text-service-instruction{color:var(--service-instruction-light)}.text-service-validator{color:var(--service-validator-light)}.text-service-pressure{color:var(--service-pressure-light)}.text-service-metacognitive{color:var(--service-metacognitive-light)}.text-service-deliberation{color:var(--service-deliberation-light)}.border-l-tractatus{border-left-color:var(--tractatus-core-end)}.border-l-service-boundary{border-left-color:var(--service-boundary-light)}.border-l-service-instruction{border-left-color:var(--service-instruction-light)}.border-l-service-validator{border-left-color:var(--service-validator-light)}.border-l-service-pressure{border-left-color:var(--service-pressure-light)}.border-l-service-metacognitive{border-left-color:var(--service-metacognitive-light)}.border-l-service-deliberation{border-left-color:var(--service-deliberation-light)}.bg-gradient-tractatus{background:linear-gradient(135deg,#2563eb 0%,#1d4ed8 50%,#7e22ce 100%)}.bg-gradient-service-boundary{background:linear-gradient(135deg,#10b981 0%,#059669 100%)}.bg-gradient-service-instruction{background:linear-gradient(135deg,#6366f1 0%,#4f46e5 100%)}.bg-gradient-service-validator{background:linear-gradient(135deg,#8b5cf6 0%,#7c3aed 100%)}.bg-gradient-service-pressure{background:linear-gradient(135deg,#f59e0b 0%,#d97706 100%)}.bg-gradient-service-metacognitive{background:linear-gradient(135deg,#ec4899 0%,#db2777 100%)}.bg-gradient-service-deliberation{background:linear-gradient(135deg,#14b8a6 0%,#0d9488 100%)}.bg-gradient-cyan-blue{background:linear-gradient(135deg,#0ea5e9 0%,#0284c7 100%)}.text-shadow-sm{text-shadow:0 1px 2px rgba(0,0,0,0.1)}.text-shadow-md{text-shadow:0 2px 4px rgba(0,0,0,0.1)}.badge-boundary{color:#065f46;background-color:#d1fae5}.badge-instruction{color:#3730a3;background-color:#e0e7ff}.badge-validator{color:#581c87;background-color:#f3e8ff}.badge-pressure{color:#92400e;background-color:#fef3c7}.badge-metacognitive{color:#831843;background-color:#fce7f3}.badge-deliberation{color:#134e4a;background-color:#ccfbf1}.min-h-16{min-height:64px}.auth-error-container{display:flex;align-items:center;justify-content:center;height:100vh;font-family:system-ui,-apple-system,sans-serif}.auth-error-content{text-align:center}.auth-error-icon{width:64px;height:64px;margin:0 auto 16px;color:#3B82F6}.auth-error-title{font-size:20px;font-weight:600;color:#111827;margin-bottom:8px}.auth-error-message{color:#6B7280;margin-bottom:16px}.auth-error-redirect{color:#9CA3AF;font-size:14px}.coming-soon-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.95);z-index:9999;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(10px)}.coming-soon-card{background:white;padding:3rem;border-radius:1rem;max-width:600px;text-align:center;box-shadow:0 25px 50px -12px rgba(0,0,0,0.25)}.coming-soon-title{font-size:2.5rem;font-weight:bold;color:#1f2937;margin-bottom:1rem}.coming-soon-subtitle{font-size:1.25rem;color:#6b7280;margin-bottom:2rem}.coming-soon-info-box{background:#eff6ff;border-left:4px solid #3b82f6;padding:1.5rem;margin-bottom:2rem;text-align:left}.coming-soon-info-title{color:#1e40af;margin-bottom:0.5rem}.coming-soon-info-text{color:#1e3a8a;font-size:0.875rem;margin:0}.coming-soon-status{color:#6b7280;font-size:0.875rem;margin-bottom:1.5rem}.coming-soon-button{display:inline-block;background:#3b82f6;color:white;padding:0.75rem 2rem;border-radius:0.5rem;text-decoration:none;font-weight:600;transition:background 0.2s}.coming-soon-button:hover{background:#2563eb}.coming-soon-footer{margin-top:1.5rem;font-size:0.75rem;color:#9ca3af}.coming-soon-footer a{color:#3b82f6;text-decoration:none}.coming-soon-footer a:hover{text-decoration:underline}.animate-on-scroll{transition:opacity 0.6s cubic-bezier(0.4,0,0.2,1),transform 0.6s cubic-bezier(0.4,0,0.2,1)}.animate-on-scroll[data-animation="fade-in"]{opacity:0}.animate-on-scroll[data-animation="fade-in"].is-visible{opacity:1}.animate-on-scroll[data-animation="slide-up"]{opacity:0;transform:translateY(2rem)}.animate-on-scroll[data-animation="slide-up"].is-visible{opacity:1;transform:translateY(0)}.animate-on-scroll[data-animation="slide-down"]{opacity:0;transform:translateY(-2rem)}.animate-on-scroll[data-animation="slide-down"].is-visible{opacity:1;transform:translateY(0)}.animate-on-scroll[data-animation="slide-left"]{opacity:0;transform:translateX(2rem)}.animate-on-scroll[data-animation="slide-left"].is-visible{opacity:1;transform:translateX(0)}.animate-on-scroll[data-animation="slide-right"]{opacity:0;transform:translateX(-2rem)}.animate-on-scroll[data-animation="slide-right"].is-visible{opacity:1;transform:translateX(0)}.animate-on-scroll[data-animation="scale-in"]{opacity:0;transform:scale(0.95)}.animate-on-scroll[data-animation="scale-in"].is-visible{opacity:1;transform:scale(1)}.animate-on-scroll[data-animation="rotate-in"]{opacity:0;transform:rotate(12deg) scale(0.95)}.animate-on-scroll[data-animation="rotate-in"].is-visible{opacity:1;transform:rotate(0deg) scale(1)}.animate-on-scroll:not([data-animation]){opacity:0;transform:translateY(2rem)}.animate-on-scroll:not([data-animation]).is-visible{opacity:1;transform:translateY(0)}@media (prefers-reduced-motion:reduce){.animate-on-scroll{opacity:1 !important;transform:none !important;transition:none !important}}body{transition:opacity 0.3s ease-in-out}body.page-fade-in{opacity:1}body.page-fade-out{opacity:0}@media (prefers-reduced-motion:reduce){body{transition:none !important}}.gauge-fill-path{transition:stroke 0.3s ease}.timeline-event{transition:all 0.3s ease}.timeline-event:hover{transform:scale(1.05)}@media (prefers-reduced-motion:reduce){.gauge-fill-path,.timeline-event{transition:none !important}.timeline-event:hover{transform:none !important}}@media (prefers-color-scheme:dark){}@media print{*{background:white !important;color:black !important;box-shadow:none !important}a{text-decoration:underline}.no-print{display:none !important}}
\ No newline at end of file
+/** * Tractatus AI Safety Framework - Theme System * * Based on TRACTATUS_BRAND_SYSTEM.md * Created: 2025-10-18 * * This file defines the complete color, typography, and design token system * for the Tractatus Framework. It implements the 6-node hexagonal orbital * brand identity with service-specific colors. */:root { /* ======================================== * CORE IDENTITY - Cyan to Blue Gradient * Shared with MySovereignty Passport * ======================================== */ --tractatus-core-start: #64ffda; /* Cyan 300 - Clarity, transparency */ --tractatus-core-mid: #448aff; /* Blue 400 - Trust, logic */ --tractatus-core-end: #0891b2; /* Cyan 600 - Technical precision (WCAG AA: 4.57:1 on gray-50) */ /* ======================================== * SIX GOVERNANCE SERVICES * Hexagonal node colors mapped to framework components * ======================================== */ /* 1. BoundaryEnforcer - Emerald Green */ --service-boundary-light: #10b981; /* Emerald 500 */ --service-boundary-dark: #059669; /* Emerald 600 */ /* 2. InstructionPersistenceClassifier - Indigo */ --service-instruction-light: #6366f1; /* Indigo 500 */ --service-instruction-dark: #4f46e5; /* Indigo 600 */ /* 3. CrossReferenceValidator - Purple */ --service-validator-light: #8b5cf6; /* Purple 500 */ --service-validator-dark: #7c3aed; /* Purple 600 */ /* 4. ContextPressureMonitor - Amber */ --service-pressure-light: #f59e0b; /* Amber 500 */ --service-pressure-dark: #d97706; /* Amber 600 */ /* 5. MetacognitiveVerifier - Rose */ --service-metacognitive-light: #ec4899; /* Pink 500 */ --service-metacognitive-dark: #db2777; /* Pink 600 */ /* 6. PluralisticDeliberationOrchestrator - Teal */ --service-deliberation-light: #14b8a6; /* Teal 500 */ --service-deliberation-dark: #0f766e; /* Teal 700 */ /* ======================================== * UI NEUTRALS - Slate-based * Technical, professional feel * ======================================== */ /* Light mode backgrounds */ --bg-primary: #ffffff; --bg-secondary: #f8fafc; /* Slate 50 */ --bg-tertiary: #f1f5f9; /* Slate 100 */ /* Text colors */ --text-primary: #0f172a; /* Slate 900 */ --text-secondary: #475569; /* Slate 600 */ --text-tertiary: #94a3b8; /* Slate 400 */ /* Borders */ --border-light: #e2e8f0; /* Slate 200 */ --border-medium: #cbd5e1; /* Slate 300 */ --border-dark: #94a3b8; /* Slate 400 */ /* Dark mode (future implementation) */ --bg-primary-dark: #0f172a; /* Slate 900 */ --bg-secondary-dark: #1e293b; /* Slate 800 */ --text-primary-dark: #f8fafc; /* Slate 50 */ /* ======================================== * SEMANTIC COLORS * State and feedback colors * ======================================== */ /* Success (safety achieved) */ --success: #10b981; /* Emerald 500 - matches BoundaryEnforcer */ --success-light: #d1fae5; /* Emerald 100 */ --success-dark: #065f46; /* Emerald 800 */ /* Warning (attention needed) */ --warning: #f59e0b; /* Amber 500 - matches PressureMonitor */ --warning-light: #fef3c7; /* Amber 100 */ --warning-dark: #92400e; /* Amber 800 */ /* Error (boundary violation) */ --error: #ef4444; /* Red 500 */ --error-light: #fee2e2; /* Red 100 */ --error-dark: #991b1b; /* Red 800 */ /* Info (neutral notification) */ --info: #0ea5e9; /* Cyan 500 - matches core */ --info-light: #e0f2fe; /* Cyan 100 */ --info-dark: #075985; /* Cyan 800 */ /* ======================================== * TYPOGRAPHY SYSTEM * Font families and weights * ======================================== */ /* Font stacks */ --font-display: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-mono: 'SF Mono', Monaco, 'Cascadia Code', monospace; /* Font weights */ --font-light: 300; --font-normal: 400; --font-medium: 500; --font-semibold: 600; --font-bold: 700; --font-extrabold: 800; /* ======================================== * GRADIENTS * Pre-defined gradient combinations * ======================================== */ /* Primary hero gradient */ --gradient-hero: linear-gradient(135deg, #64ffda 0%, #448aff 50%, #0ea5e9 100%); /* Primary CTA button */ --gradient-primary-btn: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%); /* Service-specific button gradients */ --gradient-btn-boundary: linear-gradient(135deg, #10b981 0%, #059669 100%); --gradient-btn-instruction: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%); --gradient-btn-validator: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%); --gradient-btn-pressure: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); --gradient-btn-metacognitive: linear-gradient(135deg, #ec4899 0%, #db2777 100%); --gradient-btn-deliberation: linear-gradient(135deg, #14b8a6 0%, #0d9488 100%); /* Multi-service highlight gradient */ --gradient-all-services: linear-gradient(90deg, #10b981 0%, /* BoundaryEnforcer */ #6366f1 20%, /* InstructionPersistence */ #8b5cf6 40%, /* Validator */ #f59e0b 60%, /* PressureMonitor */ #ec4899 80%, /* Metacognitive */ #14b8a6 100% /* Deliberation */ ); /* ======================================== * SPACING SCALE * Consistent spacing throughout * ======================================== */ --spacing-xs: 0.25rem; /* 4px */ --spacing-sm: 0.5rem; /* 8px */ --spacing-md: 1rem; /* 16px */ --spacing-lg: 1.5rem; /* 24px */ --spacing-xl: 2rem; /* 32px */ --spacing-2xl: 3rem; /* 48px */ --spacing-3xl: 4rem; /* 64px */ /* ======================================== * BORDER RADIUS * Rounded corner styles * ======================================== */ --radius-sm: 0.25rem; /* 4px */ --radius-md: 0.5rem; /* 8px */ --radius-lg: 0.75rem; /* 12px */ --radius-xl: 1rem; /* 16px */ --radius-2xl: 1.5rem; /* 24px */ --radius-full: 9999px; /* Fully rounded */ /* ======================================== * SHADOWS * Elevation system * ======================================== */ --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25); /* ======================================== * TRANSITIONS * Standard animation timing * ======================================== */ --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1); --transition-normal: 300ms cubic-bezier(0.4, 0, 0.2, 1); --transition-slow: 500ms cubic-bezier(0.4, 0, 0.2, 1); /* ======================================== * Z-INDEX SCALE * Layer management * ======================================== */ --z-base: 0; --z-dropdown: 1000; --z-sticky: 1020; --z-fixed: 1030; --z-modal-backdrop: 1040; --z-modal: 1050; --z-popover: 1060; --z-tooltip: 1070;}/* ======================================== * UTILITY CLASSES * Common reusable patterns * ======================================== *//* Service color accent classes */.accent-boundary { border-left-color: var(--service-boundary-light); }.accent-instruction { border-left-color: var(--service-instruction-light); }.accent-validator { border-left-color: var(--service-validator-light); }.accent-pressure { border-left-color: var(--service-pressure-light); }.accent-metacognitive { border-left-color: var(--service-metacognitive-light); }.accent-deliberation { border-left-color: var(--service-deliberation-light); }/* Text color utilities */.text-boundary { color: var(--service-boundary-light); }.text-instruction { color: var(--service-instruction-light); }.text-validator { color: var(--service-validator-light); }.text-pressure { color: var(--service-pressure-light); }.text-metacognitive { color: var(--service-metacognitive-light); }.text-deliberation { color: var(--service-deliberation-light); }/* Background utilities */.bg-boundary { background-color: var(--service-boundary-light); }.bg-instruction { background-color: var(--service-instruction-light); }.bg-validator { background-color: var(--service-validator-light); }.bg-pressure { background-color: var(--service-pressure-light); }.bg-metacognitive { background-color: var(--service-metacognitive-light); }.bg-deliberation { background-color: var(--service-deliberation-light); }/* Gradient backgrounds */.bg-gradient-hero { background: var(--gradient-hero); }.bg-gradient-all-services { background: var(--gradient-all-services); }/* ======================================== * COMPONENT BASE STYLES * Foundational component patterns * ======================================== *//* Button base */.btn-base { font-weight: var(--font-semibold); padding: 0.75rem 2rem; border-radius: var(--radius-md); transition: all var(--transition-normal); box-shadow: var(--shadow-md);}.btn-base:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px);}/* Primary button */.btn-primary { background: var(--gradient-primary-btn); color: white;}/* Service-specific buttons */.btn-boundary { background: var(--gradient-btn-boundary); color: white; }.btn-instruction { background: var(--gradient-btn-instruction); color: white; }.btn-validator { background: var(--gradient-btn-validator); color: white; }.btn-pressure { background: var(--gradient-btn-pressure); color: white; }.btn-metacognitive { background: var(--gradient-btn-metacognitive); color: white; }.btn-deliberation { background: var(--gradient-btn-deliberation); color: white; }/* Card base */.card-base { background: var(--bg-primary); border-radius: var(--radius-xl); box-shadow: var(--shadow-md); padding: 2rem; transition: all var(--transition-normal);}.card-interactive:hover { box-shadow: var(--shadow-xl); transform: translateY(-4px);}/* Service-specific cards (with left border accent) */.card-service { border-left: 4px solid transparent;}.card-service.boundary { border-left-color: var(--service-boundary-light); }.card-service.instruction { border-left-color: var(--service-instruction-light); }.card-service.validator { border-left-color: var(--service-validator-light); }.card-service.pressure { border-left-color: var(--service-pressure-light); }.card-service.metacognitive { border-left-color: var(--service-metacognitive-light); }.card-service.deliberation { border-left-color: var(--service-deliberation-light); }/* ======================================== * RESPONSIVE TYPOGRAPHY * Fluid type scale * ======================================== */.text-display-sm { font-size: clamp(2.5rem, 5vw, 3.5rem); font-family: var(--font-display); }.text-display-md { font-size: clamp(3rem, 6vw, 4.5rem); font-family: var(--font-display); }.text-display-lg { font-size: clamp(3.5rem, 8vw, 6rem); font-family: var(--font-display); }/* Apply Inter to headings */h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); font-weight: 700;}/* Fine-tune letter spacing for Inter */h1 { letter-spacing: -0.025em; }h2 { letter-spacing: -0.02em; }h3 { letter-spacing: -0.015em; }/* ======================================== * ANIMATIONS & MICRO-INTERACTIONS * Scroll effects and hover states * ======================================== *//* Keyframes */@keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); }}@keyframes fadeInScale { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); }}@keyframes slideInLeft { from { opacity: 0; transform: translateX(-30px); } to { opacity: 1; transform: translateX(0); }}@keyframes slideInRight { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: translateX(0); }}@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; }}/* Animation utility classes */.animate-fade-in { animation: fadeIn 0.6s ease-out;}.animate-fade-in-scale { animation: fadeInScale 0.5s ease-out;}.animate-slide-in-left { animation: slideInLeft 0.6s ease-out;}.animate-slide-in-right { animation: slideInRight 0.6s ease-out;}.animate-pulse { animation: pulse 2s ease-in-out infinite;}/* Staggered animation delays */.animate-delay-100 { animation-delay: 100ms; }.animate-delay-200 { animation-delay: 200ms; }.animate-delay-300 { animation-delay: 300ms; }.animate-delay-400 { animation-delay: 400ms; }.animate-delay-500 { animation-delay: 500ms; }/* Hover effects */.hover-lift { transition: transform var(--transition-normal), box-shadow var(--transition-normal);}.hover-lift:hover { transform: translateY(-4px);}.hover-scale { transition: transform var(--transition-normal);}.hover-scale:hover { transform: scale(1.05);}.hover-glow { transition: box-shadow var(--transition-normal);}.hover-glow:hover { box-shadow: 0 0 20px rgba(14, 165, 233, 0.3);}/* ======================================== * ACCESSIBILITY * Focus states and reduced motion * ======================================== *//* Enhanced focus indicators */*:focus-visible { outline: 3px solid var(--tractatus-core-end); outline-offset: 2px;}/* Respect user's motion preferences */@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }}/* ======================================== * LOADING STATES * Spinner and loading indicators * ======================================== *//* Loading spinner */.spinner { width: 40px; height: 40px; border: 4px solid var(--border-light); border-top-color: var(--tractatus-core-end); border-radius: 50%; animation: spin 0.8s linear infinite;}.spinner-sm { width: 20px; height: 20px; border-width: 2px;}.spinner-lg { width: 60px; height: 60px; border-width: 6px;}@keyframes spin { to { transform: rotate(360deg); }}/* Loading overlay */.loading-overlay { position: absolute; inset: 0; background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(2px); display: flex; align-items: center; justify-content: center; z-index: 50;}.loading-overlay-dark { background: rgba(15, 23, 42, 0.9);}/* Skeleton loading */.skeleton { background: linear-gradient( 90deg, var(--bg-secondary) 0%, var(--bg-tertiary) 50%, var(--bg-secondary) 100% ); background-size: 200% 100%; animation: skeleton-loading 1.5s ease-in-out infinite; border-radius: 0.375rem;}@keyframes skeleton-loading { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; }}.skeleton-text { height: 1rem; margin-bottom: 0.5rem;}.skeleton-heading { height: 2rem; width: 60%; margin-bottom: 1rem;}/* Loading dots */.loading-dots { display: inline-flex; gap: 0.5rem;}.loading-dots span { width: 8px; height: 8px; border-radius: 50%; background: var(--tractatus-core-end); animation: loading-dots 1.4s ease-in-out infinite;}.loading-dots span:nth-child(2) { animation-delay: 0.2s;}.loading-dots span:nth-child(3) { animation-delay: 0.4s;}@keyframes loading-dots { 0%, 80%, 100% { opacity: 0.3; transform: scale(0.8); } 40% { opacity: 1; transform: scale(1); }}/* ======================================== * CSP-COMPLIANT UTILITY CLASSES * Common styles extracted from inline attributes * ======================================== *//* Text Colors */.text-tractatus-link { color: var(--tractatus-core-end);}.text-service-boundary { color: var(--service-boundary-light);}.text-service-instruction { color: var(--service-instruction-light);}.text-service-validator { color: var(--service-validator-light);}.text-service-pressure { color: var(--service-pressure-light);}.text-service-metacognitive { color: var(--service-metacognitive-light);}.text-service-deliberation { color: var(--service-deliberation-light);}/* Border Colors */.border-l-tractatus { border-left-color: var(--tractatus-core-end);}.border-l-service-boundary { border-left-color: var(--service-boundary-light);}.border-l-service-instruction { border-left-color: var(--service-instruction-light);}.border-l-service-validator { border-left-color: var(--service-validator-light);}.border-l-service-pressure { border-left-color: var(--service-pressure-light);}.border-l-service-metacognitive { border-left-color: var(--service-metacognitive-light);}.border-l-service-deliberation { border-left-color: var(--service-deliberation-light);}/* Gradient Backgrounds */.bg-gradient-tractatus { background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 50%, #7e22ce 100%);}.bg-gradient-service-boundary { background: linear-gradient(135deg, #10b981 0%, #059669 100%);}.bg-gradient-service-instruction { background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);}.bg-gradient-service-validator { background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);}.bg-gradient-service-pressure { background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);}.bg-gradient-service-metacognitive { background: linear-gradient(135deg, #ec4899 0%, #db2777 100%);}.bg-gradient-service-deliberation { background: linear-gradient(135deg, #14b8a6 0%, #0d9488 100%);}.bg-gradient-cyan-blue { background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);}/* Tailwind Gradient Utilities (not in compiled tailwind.css) */.bg-gradient-to-r { background-image: linear-gradient(to right, var(--tw-gradient-stops)); }.bg-gradient-to-br { background-image: linear-gradient(to bottom right, var(--tw-gradient-stops)); }.bg-gradient-to-b { background-image: linear-gradient(to bottom, var(--tw-gradient-stops)); }/* From colors */.from-blue-50 { --tw-gradient-from: #eff6ff; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(239,246,255,0)); }.from-blue-600 { --tw-gradient-from: #2563eb; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(37,99,235,0)); }.from-blue-900 { --tw-gradient-from: #1e3a8a; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(30,58,138,0)); }.from-emerald-500 { --tw-gradient-from: #10b981; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(16,185,129,0)); }.from-indigo-50 { --tw-gradient-from: #eef2ff; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(238,242,255,0)); }.from-indigo-500 { --tw-gradient-from: #6366f1; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(99,102,241,0)); }.from-indigo-600 { --tw-gradient-from: #4f46e5; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(79,70,229,0)); }.from-amber-50 { --tw-gradient-from: #fffbeb; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(255,251,235,0)); }.from-amber-500 { --tw-gradient-from: #f59e0b; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(245,158,11,0)); }.from-purple-50 { --tw-gradient-from: #faf5ff; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(250,245,255,0)); }.from-purple-500 { --tw-gradient-from: #a855f7; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(168,85,247,0)); }.from-purple-600 { --tw-gradient-from: #9333ea; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(147,51,234,0)); }.from-rose-500 { --tw-gradient-from: #f43f5e; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(244,63,94,0)); }.from-teal-50 { --tw-gradient-from: #f0fdfa; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(240,253,250,0)); }.from-teal-500 { --tw-gradient-from: #14b8a6; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(20,184,166,0)); }.from-teal-600 { --tw-gradient-from: #0d9488; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(13,148,136,0)); }.from-teal-700 { --tw-gradient-from: #0f766e; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(15,118,110,0)); }.from-yellow-50 { --tw-gradient-from: #fefce8; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(254,252,232,0)); }.from-orange-50 { --tw-gradient-from: #fff7ed; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(255,247,237,0)); }.from-gray-50 { --tw-gradient-from: #f9fafb; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(249,250,251,0)); }.from-gray-800 { --tw-gradient-from: #1f2937; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(31,41,55,0)); }.from-green-50 { --tw-gradient-from: #f0fdf4; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(240,253,244,0)); }.from-sky-500 { --tw-gradient-from: #0ea5e9; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(14,165,233,0)); }.from-pink-50 { --tw-gradient-from: #fdf2f8; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(253,242,248,0)); }.from-pink-500 { --tw-gradient-from: #ec4899; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(236,72,153,0)); }/* Via colors */.via-blue-50 { --tw-gradient-stops: var(--tw-gradient-from), #eff6ff, var(--tw-gradient-to, rgba(239,246,255,0)); }.via-blue-700 { --tw-gradient-stops: var(--tw-gradient-from), #1d4ed8, var(--tw-gradient-to, rgba(29,78,216,0)); }.via-teal-50 { --tw-gradient-stops: var(--tw-gradient-from), #f0fdfa, var(--tw-gradient-to, rgba(240,253,250,0)); }.via-teal-800 { --tw-gradient-stops: var(--tw-gradient-from), #115e59, var(--tw-gradient-to, rgba(17,94,89,0)); }/* To colors */.to-blue-50 { --tw-gradient-to: #eff6ff; }.to-blue-600 { --tw-gradient-to: #2563eb; }.to-blue-700 { --tw-gradient-to: #1d4ed8; }.to-purple-50 { --tw-gradient-to: #faf5ff; }.to-purple-600 { --tw-gradient-to: #9333ea; }.to-purple-700 { --tw-gradient-to: #7e22ce; }.to-purple-900 { --tw-gradient-to: #581c87; }.to-emerald-50 { --tw-gradient-to: #ecfdf5; }.to-emerald-600 { --tw-gradient-to: #059669; }.to-emerald-700 { --tw-gradient-to: #047857; }.to-emerald-800 { --tw-gradient-to: #065f46; }.to-indigo-50 { --tw-gradient-to: #eef2ff; }.to-indigo-600 { --tw-gradient-to: #4f46e5; }.to-amber-600 { --tw-gradient-to: #d97706; }.to-rose-600 { --tw-gradient-to: #e11d48; }.to-teal-50 { --tw-gradient-to: #f0fdfa; }.to-teal-600 { --tw-gradient-to: #0d9488; }.to-orange-50 { --tw-gradient-to: #fff7ed; }.to-cyan-600 { --tw-gradient-to: #0891b2; }.to-green-50 { --tw-gradient-to: #f0fdf4; }.to-red-50 { --tw-gradient-to: #fef2f2; }.to-violet-600 { --tw-gradient-to: #7c3aed; }.to-gray-100 { --tw-gradient-to: #f3f4f6; }.to-gray-900 { --tw-gradient-to: #111827; }.to-pink-600 { --tw-gradient-to: #db2777; }/* Text Shadows */.text-shadow-sm { text-shadow: 0 1px 2px rgba(0,0,0,0.1);}.text-shadow-md { text-shadow: 0 2px 4px rgba(0,0,0,0.1);}/* Badge Backgrounds (with matching text colors) */.badge-boundary { color: #065f46; background-color: #d1fae5;}.badge-instruction { color: #3730a3; background-color: #e0e7ff;}.badge-validator { color: #581c87; background-color: #f3e8ff;}.badge-pressure { color: #92400e; background-color: #fef3c7;}.badge-metacognitive { color: #831843; background-color: #fce7f3;}.badge-deliberation { color: #134e4a; background-color: #ccfbf1;}/* Layout Utilities */.min-h-16 { min-height: 64px;}/* Auth Error Page */.auth-error-container { display: flex; align-items: center; justify-content: center; height: 100vh; font-family: system-ui, -apple-system, sans-serif;}.auth-error-content { text-align: center;}.auth-error-icon { width: 64px; height: 64px; margin: 0 auto 16px; color: #3B82F6;}.auth-error-title { font-size: 20px; font-weight: 600; color: #111827; margin-bottom: 8px;}.auth-error-message { color: #6B7280; margin-bottom: 16px;}.auth-error-redirect { color: #9CA3AF; font-size: 14px;}/* Coming Soon Overlay */.coming-soon-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.95); z-index: 9999; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(10px);}.coming-soon-card { background: white; padding: 3rem; border-radius: 1rem; max-width: 600px; text-align: center; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);}.coming-soon-title { font-size: 2.5rem; font-weight: bold; color: #1f2937; margin-bottom: 1rem;}.coming-soon-subtitle { font-size: 1.25rem; color: #6b7280; margin-bottom: 2rem;}.coming-soon-info-box { background: #eff6ff; border-left: 4px solid #3b82f6; padding: 1.5rem; margin-bottom: 2rem; text-align: left;}.coming-soon-info-title { color: #1e40af; margin-bottom: 0.5rem;}.coming-soon-info-text { color: #1e3a8a; font-size: 0.875rem; margin: 0;}.coming-soon-status { color: #6b7280; font-size: 0.875rem; margin-bottom: 1.5rem;}.coming-soon-button { display: inline-block; background: #3b82f6; color: white; padding: 0.75rem 2rem; border-radius: 0.5rem; text-decoration: none; font-weight: 600; transition: background 0.2s;}.coming-soon-button:hover { background: #2563eb;}.coming-soon-footer { margin-top: 1.5rem; font-size: 0.75rem; color: #9ca3af;}.coming-soon-footer a { color: #3b82f6; text-decoration: none;}.coming-soon-footer a:hover { text-decoration: underline;}/* ======================================== * SCROLL ANIMATIONS * Intersection Observer-based scroll animations * ======================================== *//* Scroll animation initial states (before visible) */.animate-on-scroll { transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1), transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);}/* Fade in animation */.animate-on-scroll[data-animation="fade-in"] { opacity: 0;}.animate-on-scroll[data-animation="fade-in"].is-visible { opacity: 1;}/* Slide up animation */.animate-on-scroll[data-animation="slide-up"] { opacity: 0; transform: translateY(2rem);}.animate-on-scroll[data-animation="slide-up"].is-visible { opacity: 1; transform: translateY(0);}/* Slide down animation */.animate-on-scroll[data-animation="slide-down"] { opacity: 0; transform: translateY(-2rem);}.animate-on-scroll[data-animation="slide-down"].is-visible { opacity: 1; transform: translateY(0);}/* Slide left animation */.animate-on-scroll[data-animation="slide-left"] { opacity: 0; transform: translateX(2rem);}.animate-on-scroll[data-animation="slide-left"].is-visible { opacity: 1; transform: translateX(0);}/* Slide right animation */.animate-on-scroll[data-animation="slide-right"] { opacity: 0; transform: translateX(-2rem);}.animate-on-scroll[data-animation="slide-right"].is-visible { opacity: 1; transform: translateX(0);}/* Scale in animation */.animate-on-scroll[data-animation="scale-in"] { opacity: 0; transform: scale(0.95);}.animate-on-scroll[data-animation="scale-in"].is-visible { opacity: 1; transform: scale(1);}/* Rotate in animation */.animate-on-scroll[data-animation="rotate-in"] { opacity: 0; transform: rotate(12deg) scale(0.95);}.animate-on-scroll[data-animation="rotate-in"].is-visible { opacity: 1; transform: rotate(0deg) scale(1);}/* Default animation if no data-animation specified */.animate-on-scroll:not([data-animation]) { opacity: 0; transform: translateY(2rem);}.animate-on-scroll:not([data-animation]).is-visible { opacity: 1; transform: translateY(0);}/* Respect user's motion preferences for scroll animations */@media (prefers-reduced-motion: reduce) { .animate-on-scroll { opacity: 1 !important; transform: none !important; transition: none !important; }}/* ======================================== * PAGE TRANSITIONS * Smooth fade transitions between pages * ======================================== */body { transition: opacity 0.3s ease-in-out;}body.page-fade-in { opacity: 1;}body.page-fade-out { opacity: 0;}/* Respect user's motion preferences for page transitions */@media (prefers-reduced-motion: reduce) { body { transition: none !important; }}/* ======================================== * DATA VISUALIZATIONS * Pressure chart and timeline components * ======================================== */.gauge-fill-path { transition: stroke 0.3s ease;}.timeline-event { transition: all 0.3s ease;}.timeline-event:hover { transform: scale(1.05);}@media (prefers-reduced-motion: reduce) { .gauge-fill-path, .timeline-event { transition: none !important; } .timeline-event:hover { transform: none !important; }}/* ======================================== * DARK MODE SUPPORT (Future) * Placeholder for dark mode implementation * ======================================== */@media (prefers-color-scheme: dark) { /* Will be implemented in Phase 3 */}/* ======================================== * PRINT STYLES * Optimize for PDF/print output * ======================================== */@media print { * { background: white !important; color: black !important; box-shadow: none !important; } a { text-decoration: underline; } .no-print { display: none !important; }}
\ No newline at end of file