/* ============================================================================= * Platform UI Design Tokens — 137-hub (Das Erwachen) * * ADR-049: CSS Custom Properties + Tailwind Bridge * Prefix: --pui-* (Platform UI) * * App identity: data-app="137-hub" on * Theme toggle: data-theme="light" | "dark" on * ============================================================================= */ :root { /* === Primitive Tokens (internal only — never use directly in templates) === */ /* Violets — primary palette (Das Erwachen brand) */ --pui-violet-50: #f0ecff; --pui-violet-100: #ddd6f3; --pui-violet-200: #b8b0d4; --pui-violet-300: #a78bfa; --pui-violet-400: #7b6ec7; --pui-violet-500: #4a3f8a; --pui-violet-600: #1a1b4b; --pui-violet-700: #0f1129; --pui-violet-800: #0a0b1a; --pui-violet-900: #050507; /* Gold — accent (warmth, humanity) */ --pui-gold-400: #e8c88a; --pui-gold-500: #d4a574; --pui-gold-600: #b8884a; /* Rose — accent (resonance, empathy) */ --pui-rose-400: #e4a0ad; --pui-rose-500: #c77d8a; /* Signal blue — system/tech elements */ --pui-signal-500: #5a5aff; --pui-signal-600: #4040cc; /* Utility */ --pui-white: #f0ecff; --pui-black: #050507; --pui-red-500: #ff4a4a; --pui-green-500: #22c55e; --pui-amber-500: #f59e0b; } /* === Semantic Tokens (public API — used via Tailwind classes) === */ :root { /* Primary — brand violet */ --pui-primary: var(--pui-violet-400); --pui-primary-hover: var(--pui-violet-300); /* Accent — warm gold */ --pui-accent: var(--pui-gold-500); --pui-accent-hover: var(--pui-gold-400); /* Status */ --pui-success: var(--pui-green-500); --pui-danger: var(--pui-red-500); --pui-warning: var(--pui-amber-500); /* Text */ --pui-foreground: var(--pui-violet-50); --pui-foreground-bright: var(--pui-white); --pui-muted: var(--pui-violet-200); --pui-dim: var(--pui-violet-500); /* Surfaces — dark-first (Das Erwachen is always dark) */ --pui-surface: var(--pui-violet-800); --pui-surface-alt: var(--pui-violet-700); --pui-void: var(--pui-violet-900); /* Borders */ --pui-border: rgba(75, 63, 138, 0.2); --pui-border-strong: rgba(75, 63, 138, 0.4); /* Spacing (consistent scale) */ --pui-space-1: 0.25rem; --pui-space-2: 0.5rem; --pui-space-3: 0.75rem; --pui-space-4: 1rem; --pui-space-6: 1.5rem; --pui-space-8: 2rem; --pui-space-12: 3rem; /* Layout */ --pui-radius-sm: 0.125rem; --pui-radius-md: 0.25rem; --pui-radius-lg: 0.5rem; --pui-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); --pui-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4); --pui-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5); --pui-transition: 150ms cubic-bezier(0.4, 0, 0.2, 1); } /* === App-specific overrides (ADR-049 §4: data-app on ) === */ [data-app="137-hub"] { --pui-primary: var(--pui-violet-400); --pui-primary-hover: var(--pui-violet-300); --pui-accent: var(--pui-gold-500); --pui-accent-hover: var(--pui-gold-400); } /* === Fonts === */ :root { --pui-font-serif: "Cormorant Garamond", "Georgia", serif; --pui-font-sans: "DM Sans", "Inter", -apple-system, BlinkMacSystemFont, sans-serif; --pui-font-mono: "JetBrains Mono", "IBM Plex Mono", "Fira Code", monospace; } /* === Utility classes (non-Tailwind, for token-based styling) === */ .pui-glow-primary { box-shadow: 0 0 30px rgba(123, 110, 199, 0.2); } .pui-glow-accent { box-shadow: 0 0 30px rgba(212, 165, 116, 0.2); } .pui-text-gradient { background: linear-gradient(135deg, var(--pui-primary), var(--pui-accent)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* === Animations === */ @keyframes pui-fade-up { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } @keyframes pui-fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes pui-pulse-ring { 0%, 100% { opacity: 0.3; transform: scale(1); } 50% { opacity: 0.7; transform: scale(1.03); } } @keyframes pui-status-pulse { 0%, 100% { opacity: 0.4; } 50% { opacity: 1; } } @keyframes pui-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } /* === HTMX loading states (ADR-048 HP-001) === */ .htmx-indicator { display: none; } .htmx-request .htmx-indicator, .htmx-request.htmx-indicator { display: inline-block; } /* === Toast container (ADR-048 HP-005) === */ .toast { padding: var(--pui-space-3) var(--pui-space-4); border-radius: var(--pui-radius-md); font-size: 0.875rem; animation: pui-fade-up 0.3s ease forwards; } .toast-error { background: rgba(255, 74, 74, 0.15); border: 1px solid rgba(255, 74, 74, 0.3); color: var(--pui-danger); } .toast-warning { background: rgba(245, 158, 11, 0.15); border: 1px solid rgba(245, 158, 11, 0.3); color: var(--pui-warning); } .toast-success { background: rgba(34, 197, 94, 0.15); border: 1px solid rgba(34, 197, 94, 0.3); color: var(--pui-success); } /* === Scroll reveal (intersection observer) === */ .reveal { opacity: 0; transform: translateY(40px); transition: all 1s ease; } .reveal.visible { opacity: 1; transform: translateY(0); }