tractatus/public/css/tractatus-theme.css

/**
 * 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: #0ea5e9;     /* Cyan 500 - Technical precision */

  /* ========================================
   * 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-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, #64ffda 0%, #448aff 50%, #0ea5e9 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 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;
}

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