1
@theme {
2
  --default-transition-duration: 75ms;
3
  --font-sans:
4
    "Outfit Variable", ui-sans-serif, system-ui, -apple-system, "Noto Sans CJK SC", "PingFang SC", "Hiragino Sans",
5
    "Microsoft YaHei", sans-serif;
6
  --font-display: "Bricolage Grotesque Variable", "Outfit Variable", ui-sans-serif, system-ui, sans-serif;
7
  --font-mono: "JetBrains Mono", "SF Mono", "Fira Code", "Noto Sans Mono CJK SC", monospace;
8
 
9
  /* Warm amethyst accent palette */
10
  --color-accent-50: #faf7ff;
11
  --color-accent-100: #f1ecfe;
12
  --color-accent-200: #e2d7fe;
13
  --color-accent-300: #ccb4fb;
14
  --color-accent-400: #b48ef5;
15
  --color-accent-500: #9d6ee8;
16
  --color-accent-600: #8854d4;
17
  --color-accent-700: #7241b8;
18
  --color-accent-800: #5e3497;
19
  --color-accent-900: #4d2a7c;
20
 
21
  /* Warm zinc overrides — subtle warm tinting per .impeccable.md */
22
  --color-zinc-50: #fafaf9;
23
  --color-zinc-100: #f5f4f4;
24
  --color-zinc-200: #e5e4e5;
25
  --color-zinc-300: #d6d4d7;
26
  --color-zinc-400: #a3a1a8;
27
  --color-zinc-500: #747178;
28
  --color-zinc-600: #555259;
29
  --color-zinc-700: #423f42;
30
  --color-zinc-800: #2a2729;
31
  --color-zinc-900: #1b181a;
32
  --color-zinc-950: #0c090b;
33
 
34
  /* Callout kind labels — OKLCH, low chroma for astigmatism comfort,
35
     hues orbiting the amethyst accent (290) so they feel related. */
36
  --color-callout-info: oklch(0.82 0.06 265);
37
  --color-callout-tip: oklch(0.89 0.05 295);
38
  --color-callout-warning: oklch(0.82 0.07 62);
39
 
40
  /* Canvas (lifted dark body background — warmed) */
41
  --color-canvas: #221f21;
42
 
43
  /* Floating overlay surface (toolbars, popovers) — sits above every editor surface via shadow, not value */
44
  --color-overlay-surface: var(--color-zinc-700);
45
 
46
  /* Animations */
47
  --animate-fade-in: fade-in 0.4s ease-out both;
48
  --animate-slide-up: slide-up 0.35s ease-out both;
49
  --animate-scale-fade: scale-fade 0.3s cubic-bezier(0.16, 1, 0.3, 1) both;
50
  --animate-menu: fade-in 0.15s ease-out both;
51
  --animate-shimmer: shimmer 1.5s ease-in-out infinite;
52
  --animate-caret-blink: caret-blink 1.1s steps(2, start) infinite;
53
}
54
 
55
@keyframes fade-in {
56
  from {
57
    opacity: 0;
58
  }
59
  to {
60
    opacity: 1;
61
  }
62
}
63
 
64
@keyframes slide-up {
65
  from {
66
    opacity: 0;
67
    transform: translateY(12px);
68
  }
69
  to {
70
    opacity: 1;
71
    transform: translateY(0);
72
  }
73
}
74
 
75
@keyframes scale-fade {
76
  from {
77
    opacity: 0;
78
    transform: scale(0.96);
79
  }
80
  to {
81
    opacity: 1;
82
    transform: scale(1);
83
  }
84
}
85
 
86
@keyframes shimmer {
87
  from {
88
    background-position: -200% 0;
89
  }
90
  to {
91
    background-position: 200% 0;
92
  }
93
}
94
 
95
@keyframes caret-blink {
96
  0% {
97
    opacity: 1;
98
  }
99
  50% {
100
    opacity: 0;
101
  }
102
}
103
 
104
/* Shared scrollbar styling for app and published Sites surfaces. */
105
@layer base {
106
  html,
107
  body,
108
  .overflow-y-auto,
109
  .overflow-auto,
110
  .tiptap pre,
111
  .tableWrapper {
112
    scrollbar-width: thin;
113
    scrollbar-color: var(--color-zinc-700) transparent;
114
  }
115
 
116
  html::-webkit-scrollbar,
117
  body::-webkit-scrollbar,
118
  .overflow-y-auto::-webkit-scrollbar,
119
  .overflow-auto::-webkit-scrollbar,
120
  .tiptap pre::-webkit-scrollbar,
121
  .tableWrapper::-webkit-scrollbar {
122
    width: 6px;
123
    height: 6px;
124
  }
125
 
126
  html::-webkit-scrollbar-track,
127
  body::-webkit-scrollbar-track,
128
  .overflow-y-auto::-webkit-scrollbar-track,
129
  .overflow-auto::-webkit-scrollbar-track,
130
  .tiptap pre::-webkit-scrollbar-track,
131
  .tableWrapper::-webkit-scrollbar-track {
132
    background: transparent;
133
  }
134
 
135
  html::-webkit-scrollbar-thumb,
136
  body::-webkit-scrollbar-thumb,
137
  .overflow-y-auto::-webkit-scrollbar-thumb,
138
  .overflow-auto::-webkit-scrollbar-thumb,
139
  .tiptap pre::-webkit-scrollbar-thumb,
140
  .tableWrapper::-webkit-scrollbar-thumb {
141
    background-color: var(--color-zinc-700);
142
    border-radius: 3px;
143
  }
144
 
145
  html::-webkit-scrollbar-thumb:hover,
146
  body::-webkit-scrollbar-thumb:hover,
147
  .overflow-y-auto::-webkit-scrollbar-thumb:hover,
148
  .overflow-auto::-webkit-scrollbar-thumb:hover,
149
  .tiptap pre::-webkit-scrollbar-thumb:hover,
150
  .tableWrapper::-webkit-scrollbar-thumb:hover {
151
    background-color: var(--color-zinc-600);
152
  }
153
}
154
 
155
@media (prefers-reduced-motion: reduce) {
156
  *,
157
  *::before,
158
  *::after {
159
    animation-duration: 0.01ms !important;
160
    animation-delay: 0ms !important;
161
    animation-iteration-count: 1 !important;
162
    transition-duration: 0.01ms !important;
163
    scroll-behavior: auto !important;
164
  }
165
}