| 1 | /* Design tokens — refreshed to the Hyperframes (heygen.com/hyperframes) visual |
| 2 | * language: warm paper-white surfaces, mint-green accent, warm-grey hairline |
| 3 | * borders, tight radii, near-shadowless, mono-forward "code editor" feel. |
| 4 | * Only token VALUES changed — the studio layout/structure is untouched. */ |
| 5 | :root { |
| 6 | /* Surfaces — paper white + warm off-white panels (hyperframes #fff / #f6f5f1 / #f0efe9) */ |
| 7 | --bg: #f6f5f1; |
| 8 | --bg-panel: #ffffff; |
| 9 | --bg-subtle: #f0efe9; |
| 10 | --bg-elevated: #ffffff; |
| 11 | |
| 12 | /* Text — near-black on paper (hyperframes #1a1a1a / #6b6b6b / #aaa) */ |
| 13 | --text: #1a1a1a; |
| 14 | --text-muted: #6b6b6b; |
| 15 | --text-faint: #aaaaaa; |
| 16 | |
| 17 | /* Accent — mint green (hyperframes primary CTA #3ce6ac on dark text) */ |
| 18 | --accent: #3ce6ac; |
| 19 | --accent-hover: #2fd49c; |
| 20 | --accent-soft: #d6f7ec; |
| 21 | --accent-fg: #0b0b0b; |
| 22 | |
| 23 | /* Border — warm grey hairline (hyperframes #e0dfdb) */ |
| 24 | --border: #e0dfdb; |
| 25 | --border-strong: #d0cfc9; |
| 26 | |
| 27 | /* Status — keep the hyperframes traffic-light accents available */ |
| 28 | --green: #16a34a; |
| 29 | --green-bg: #e3f5e8; |
| 30 | --blue: #2348b8; |
| 31 | --blue-bg: #e6ecfb; |
| 32 | --red: #e5484d; |
| 33 | --red-bg: #fbe7e7; |
| 34 | --amber: #b26200; |
| 35 | --amber-bg: #faedc8; |
| 36 | |
| 37 | /* Selected (user chat bubbles) — sits on the dark/ink end, not the mint */ |
| 38 | --selected: #1a1a1a; |
| 39 | --selected-fg: #ffffff; |
| 40 | |
| 41 | /* Radii — hyperframes buttons 10-12px, pills 20px */ |
| 42 | --radius-sm: 8px; |
| 43 | --radius: 12px; |
| 44 | --radius-lg: 16px; |
| 45 | --radius-pill: 999px; |
| 46 | |
| 47 | /* Shadows — near-shadowless paper look; keep tiny lifts only */ |
| 48 | --shadow-xs: 0 1px 1px rgba(20, 18, 11, 0.03); |
| 49 | --shadow-sm: 0 1px 3px rgba(20, 18, 11, 0.05); |
| 50 | --shadow-md: 0 4px 16px rgba(20, 18, 11, 0.07); |
| 51 | --shadow-lg: 0 18px 48px rgba(20, 18, 11, 0.14); |
| 52 | |
| 53 | /* Typography — Inter (≈ TT Norms Pro) + JetBrains Mono (≈ TT Norms Pro Mono) */ |
| 54 | --font-sans: 'Inter', -apple-system, 'Segoe UI', system-ui, sans-serif; |
| 55 | --font-mono: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace; |
| 56 | --font-serif: 'Source Serif 4', Georgia, serif; |
| 57 | } |
| 58 | |
| 59 | /* Dark mode — the hyperframes ink end (#0a0a0a) with the same mint accent. */ |
| 60 | @media (prefers-color-scheme: dark) { |
| 61 | :root { |
| 62 | --bg: #0a0a0a; |
| 63 | --bg-panel: #141414; |
| 64 | --bg-subtle: #1c1c1c; |
| 65 | --bg-elevated: #1c1c1c; |
| 66 | |
| 67 | --text: #f4f4f2; |
| 68 | --text-muted: #9a9a96; |
| 69 | --text-faint: #555552; |
| 70 | |
| 71 | --accent: #3ce6ac; |
| 72 | --accent-hover: #54ecb9; |
| 73 | --accent-soft: #103a2c; |
| 74 | --accent-fg: #0b0b0b; |
| 75 | |
| 76 | --border: #2a2a28; |
| 77 | --border-strong: #3a3a36; |
| 78 | |
| 79 | --green-bg: #103a23; |
| 80 | --blue-bg: #16213f; |
| 81 | --red-bg: #3a1a1b; |
| 82 | --amber-bg: #3a2c0d; |
| 83 | } |
| 84 | } |
| 85 |