/* ────────────────────────────────────────────────────────────────────── * Schedii Design System — Tokens * * Drop this file into any project to inherit Schedii's full design language: * colors, type scale, shadows, spacing, motion classes. * * Themes are switched via [data-theme="light"] on a parent (default = dark). * Set or on the root. * * Snapshot taken: 2026-05-09 from engine/apps/frontend/src/app/globals.css * ────────────────────────────────────────────────────────────────────── */ :root { /* ── Brand ─────────────────────────────────────────────────────────── */ --color-primary: #06b6d4; --color-primary-foreground: #ffffff; --color-accent: #06b6d4; --color-accent-foreground: #ffffff; /* Body-text cyans (theme-aware — read-friendly contrast) */ --color-link-text: #22d3ee; /* cyan-400 — body links on dark */ --color-code-text: #67e8f9; /* cyan-200 — inline code on dark */ /* ── Dark theme (default) ──────────────────────────────────────────── */ --color-background: #1a1a28; --color-foreground: #f8fafc; --color-hero-text: var(--color-foreground); --shadow-hero: 0 0 40px rgba(10,14,26,0.9), 0 2px 20px rgba(0,0,0,0.6); --color-card: #23233a; --color-card-foreground: #f8fafc; --color-muted: #2e2e46; --color-muted-foreground: #94a3b8; --color-border: #3a3a55; /* Semantic */ --color-destructive: #ef4444; --color-destructive-foreground: #ffffff; --color-success: #10b981; --color-warning: #f59e0b; --color-info: #3b82f6; /* Spacing */ --spacing-unit: 1; --text-scale: 1; --card-padding: 1.5rem; --gap-default: 1rem; /* Fluid type scale — clamp(min, vw-driver, max) */ --font-fluid-xs: clamp(11px, 0.18vw + 10px, 13px); --font-fluid-sm: clamp(12px, 0.20vw + 11px, 14px); --font-fluid-base: clamp(14px, 0.25vw + 13px, 16px); --font-fluid-lg: clamp(15px, 0.40vw + 14px, 18px); --font-fluid-xl: clamp(17px, 0.60vw + 15px, 22px); --font-fluid-2xl: clamp(20px, 1.00vw + 17px, 28px); --font-fluid-3xl: clamp(26px, 1.80vw + 20px, 40px); --font-fluid-hero: clamp(32px, 3.20vw + 22px, 60px); /* Glass / overlay */ --color-glass-bg: rgba(35, 35, 58, 0.5); --color-glass-border: rgba(255, 255, 255, 0.1); --color-label: #6b7280; /* Cyan tints */ --color-primary-5: rgba(6, 182, 212, 0.05); --color-primary-10: rgba(6, 182, 212, 0.10); --color-primary-15: rgba(6, 182, 212, 0.15); --color-primary-20: rgba(6, 182, 212, 0.20); --color-primary-30: rgba(6, 182, 212, 0.30); --color-primary-50: rgba(6, 182, 212, 0.50); /* Separators */ --color-separator: rgba(255, 255, 255, 0.06); --color-separator-light: rgba(255, 255, 255, 0.08); --color-overlay-subtle: rgba(255, 255, 255, 0.02); --color-overlay-light: rgba(255, 255, 255, 0.05); /* Shadows (dark — barely visible, borders + glows do the work) */ --shadow-subtle: 0 1px 3px rgba(0, 0, 0, 0.30); --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.25); --shadow-elevated: 0 8px 24px rgba(0, 0, 0, 0.40); --shadow-glow: 0 0 12px rgba(6, 182, 212, 0.30); --shadow-modal: 0 4px 16px rgba(0, 0, 0, 0.30); /* Schedii icon pack */ --schedii-icon: #5dd5e0; /* brand cyan from Schedii logo head */ --schedii-icon-active: #7ee5ee; --schedii-icon-muted: #6a7a99; } /* ── Light theme ────────────────────────────────────────────────────── */ [data-theme="light"] { --color-background: #f0f4f8; --color-foreground: #1e293b; /* slate-800, NEVER pure black */ --color-card: #ffffff; --color-card-foreground: #1e293b; --color-muted: #e8edf3; --color-muted-foreground: #475569; --color-border: #cbd5e1; --color-hero-text: #334155; /* slate-700 — softer than body */ --shadow-hero: 0 0 30px rgba(255,255,255,0.7), 0 1px 2px rgba(15,23,42,0.05); --color-glass-bg: rgba(255, 255, 255, 0.85); --color-glass-border: rgba(15, 23, 42, 0.10); --color-label: #475569; /* Body cyans flip darker for AA contrast on near-white cards */ --color-link-text: #0e7490; /* cyan-700 */ --color-code-text: #155e75; /* cyan-800 */ /* Cyan tints (slightly softer in light mode) */ --color-primary-5: rgba(6, 182, 212, 0.04); --color-primary-10: rgba(6, 182, 212, 0.08); --color-primary-15: rgba(6, 182, 212, 0.12); --color-primary-20: rgba(6, 182, 212, 0.18); --color-primary-30: rgba(6, 182, 212, 0.25); --color-primary-50: rgba(6, 182, 212, 0.40); --color-separator: rgba(15, 23, 42, 0.08); --color-separator-light: rgba(15, 23, 42, 0.10); --color-overlay-subtle: rgba(15, 23, 42, 0.02); --color-overlay-light: rgba(15, 23, 42, 0.04); --shadow-glow: 0 0 12px rgba(6, 182, 212, 0.15); --shadow-modal: 0 4px 16px rgba(0, 0, 0, 0.10); /* Three-tier shadow system — light mode does the elevation work */ --shadow-subtle: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04); --shadow-card: 0 2px 8px rgba(15, 23, 42, 0.08), 0 1px 3px rgba(15, 23, 42, 0.05); --shadow-elevated: 0 8px 24px rgba(15, 23, 42, 0.12), 0 2px 8px rgba(15, 23, 42, 0.06); /* Schedii icons re-tinted for light bg */ --schedii-icon: #0d9488; /* deep teal — strong on white */ --schedii-icon-active: #0f766e; --schedii-icon-muted: #5b6478; /* Dock items (light mode) */ --dock-icon-color: #334155; --dock-icon-label: #475569; --dock-item-bg: rgba(15, 23, 42, 0.05); --dock-item-border: rgba(15, 23, 42, 0.12); } /* ── Base ───────────────────────────────────────────────────────────── */ * { border-color: var(--color-border); } body { background-color: var(--color-background); color: var(--color-foreground); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ── Card-family — the canonical hover treatment ────────────────────── */ .card-family { transition: transform 180ms cubic-bezier(0.4, 0, 0.2, 1), border-color 180ms ease, box-shadow 220ms ease, background-color 180ms ease; will-change: transform, box-shadow; } .card-family:hover { transform: translateY(-2px); border-color: rgba(6, 182, 212, 0.35) !important; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18), 0 0 0 1px rgba(6, 182, 212, 0.15), 0 0 24px rgba(6, 182, 212, 0.12); } .card-family-tap:active { transform: translateY(-1px) scale(0.995); } @media (prefers-reduced-motion: reduce) { .card-family, .card-family:hover, .card-family-tap:active { transform: none; transition: border-color 120ms ease, box-shadow 160ms ease; } } /* ── Schedii icon pack ──────────────────────────────────────────────── */ .schedii-nav-icon { color: var(--schedii-icon); opacity: 0.65; transition: color 120ms ease, opacity 120ms ease; } .schedii-nav-icon:hover, .schedii-nav-icon[aria-current="page"], .schedii-nav-icon[data-active] { color: var(--schedii-icon-active); opacity: 1; } .schedii-nav-icon[data-disabled] { color: var(--schedii-icon-muted); opacity: 0.4; pointer-events: none; } /* ── Scrollbars ─────────────────────────────────────────────────────── */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: var(--color-muted); } ::-webkit-scrollbar-thumb { background: var(--color-muted-foreground); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: var(--color-primary); } .scrollbar-thin::-webkit-scrollbar { width: 6px; } .scrollbar-thin::-webkit-scrollbar-track { background: rgba(6, 182, 212, 0.05); border-radius: 10px; } .scrollbar-thin::-webkit-scrollbar-thumb { background: rgba(6, 182, 212, 0.3); border-radius: 10px; } .scrollbar-thin::-webkit-scrollbar-thumb:hover { background: rgba(6, 182, 212, 0.5); } .scrollbar-thin { scrollbar-width: thin; scrollbar-color: rgba(6, 182, 212, 0.3) rgba(6, 182, 212, 0.05); } .hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; } .hide-scrollbar::-webkit-scrollbar { display: none; } /* ── Animations ─────────────────────────────────────────────────────── */ @keyframes shimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } } .typing-dots span { animation: typing-bounce 1.2s ease-in-out infinite; } @keyframes typing-bounce { 0%, 60%, 100% { transform: scale(1); opacity: 0.3; } 30% { transform: scale(1.4); opacity: 1; } } .streaming-cursor::after { content: ''; display: inline-block; width: 2px; height: 1em; background: #06b6d4; margin-left: 2px; vertical-align: text-bottom; animation: blink-cursor 1s step-end infinite; } @keyframes blink-cursor { 0%, 100% { opacity: 1; } 50% { opacity: 0; } } @keyframes set-name-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(6, 182, 212, 0); } 40% { box-shadow: 0 0 0 5px rgba(6, 182, 212, 0.35), 0 0 18px rgba(6, 182, 212, 0.45); } } @keyframes geniie-bar-sweep { 0% { transform: translateX(-100%); } 100% { transform: translateX(400%); } } .geniie-bar-sweep { animation: geniie-bar-sweep 1.6s ease-in-out infinite; pointer-events: none; } /* OrbitSwim — the signature interaction. * Burst out → implode → vanish → reform mirrored. The symmetry is the point. */ @keyframes orbit-icon-explode { 0% { transform: scale(1) rotate(0deg); opacity: 1; } 18% { transform: scale(1.55) rotate(8deg); opacity: 1; } 35% { transform: scale(0.25) rotate(-10deg); opacity: 0.45; } 50% { transform: scale(0) rotate(0deg); opacity: 0; } 60% { transform: scale(0) rotate(0deg); opacity: 0; } 75% { transform: scale(0.25) rotate(10deg); opacity: 0.45; } 88% { transform: scale(1.45) rotate(-6deg); opacity: 1; } 100% { transform: scale(1) rotate(0deg); opacity: 1; } } .orbit-icon-exploding { animation: orbit-icon-explode 900ms cubic-bezier(0.5, 0, 0.5, 1) both; transform-origin: 50% 50%; } @keyframes orbit-particle-burst { 0% { transform: translate(0, 0) scale(1); opacity: 1; } 60% { opacity: 0.85; } 100% { transform: translate(var(--ex), var(--ey)) scale(0); opacity: 0; } } .orbit-particle { position: absolute; left: 50%; top: 50%; width: 5px; height: 5px; margin-left: -2.5px; margin-top: -2.5px; border-radius: 9999px; pointer-events: none; animation: orbit-particle-burst 700ms cubic-bezier(0.22, 0.6, 0.36, 1) forwards; } /* ── Compact mode (opt-in) ──────────────────────────────────────────── */ .compact { --spacing-unit: 0.75; --text-scale: 0.9; --card-padding: 1rem; --gap-default: 0.75rem; } .compact h1 { font-size: calc(2rem * var(--text-scale)); } .compact h2 { font-size: calc(1.5rem * var(--text-scale)); } .compact h3 { font-size: calc(1.25rem * var(--text-scale)); } .compact p { font-size: calc(1rem * var(--text-scale)); } /* ── Native select dark-mode fix (Windows renders white dropdowns) ──── */ select, select option { background-color: var(--color-card, #1a1f2e); color: var(--color-foreground, #e2e8f0); }