1  /* ========================================
  2     AUTHS DOCUMENTATION - ENTERPRISE SaaS STYLE
  3     Inspired by Stripe/Linear documentation
  4     ======================================== */
  5  
  6  /* ----------------------------------------
  7     TYPOGRAPHY - Tighter and cleaner
  8     ---------------------------------------- */
  9  body {
 10      -webkit-font-smoothing: antialiased;
 11      letter-spacing: -0.01em;
 12  }
 13  
 14  /* ----------------------------------------
 15     SaaS HEADER STYLE (White with border)
 16     ---------------------------------------- */
 17  [data-md-color-scheme="default"] .md-header {
 18      background-color: #fff;
 19      box-shadow: none;
 20      border-bottom: 1px solid #e5e7eb;
 21  }
 22  
 23  [data-md-color-scheme="default"] .md-tabs {
 24      background-color: #fff;
 25      border-bottom: 1px solid #e5e7eb;
 26  }
 27  
 28  /* Fix text colors since we made header white */
 29  [data-md-color-scheme="default"] .md-header__button,
 30  [data-md-color-scheme="default"] .md-header__title,
 31  [data-md-color-scheme="default"] .md-tabs__link {
 32      color: #0f172a;
 33  }
 34  
 35  [data-md-color-scheme="default"] .md-tabs__link--active {
 36      color: #5b21b6;
 37      font-weight: 700;
 38  }
 39  
 40  /* ----------------------------------------
 41     DARK MODE
 42     ---------------------------------------- */
 43  [data-md-color-scheme="slate"] {
 44      --md-default-bg-color: #0a0a0f;
 45      --md-default-bg-color--light: #12121a;
 46      --md-default-bg-color--lighter: #16161f;
 47      --md-default-bg-color--lightest: #2a2a3a;
 48  
 49      --md-default-fg-color: #f0f0f5;
 50      --md-default-fg-color--light: #8888a0;
 51      --md-default-fg-color--lighter: #8888a0;
 52      --md-default-fg-color--lightest: #2a2a3a;
 53  
 54      /* Accent colors - purple gradient */
 55      --md-primary-fg-color: #a78bfa;
 56      --md-primary-fg-color--light: #a78bfa33;
 57      --md-primary-fg-color--dark: #7c3aed;
 58      --md-accent-fg-color: #a78bfa;
 59      --md-accent-fg-color--transparent: #a78bfa1a;
 60  
 61      /* Code blocks */
 62      --md-code-bg-color: #12121a;
 63      --md-code-fg-color: #a78bfa;
 64      --md-code-hl-color: #7c3aed26;
 65  
 66      /* Typeset */
 67      --md-typeset-color: #f0f0f5;
 68      --md-typeset-a-color: #a78bfa;
 69  
 70      /* Footer */
 71      --md-footer-bg-color: #0a0a0f;
 72      --md-footer-bg-color--dark: #050508;
 73  }
 74  
 75  [data-md-color-scheme="slate"] .md-header {
 76      background-color: #0a0a0f;
 77      border-bottom: 1px solid #2a2a3a;
 78  }
 79  
 80  [data-md-color-scheme="slate"] .md-tabs {
 81      background-color: #0a0a0f;
 82      border-bottom: 1px solid #2a2a3a;
 83  }
 84  
 85  [data-md-color-scheme="slate"] .md-tabs__link--active {
 86      color: #a78bfa;
 87      font-weight: 700;
 88  }
 89  
 90  [data-md-color-scheme="slate"] .md-nav__link--active {
 91      color: #a78bfa;
 92  }
 93  
 94  /* ----------------------------------------
 95     HERO TEXT (Landing page)
 96     ---------------------------------------- */
 97  .hero-text {
 98      font-size: 3rem;
 99      font-weight: 800;
100      line-height: 1.1;
101      letter-spacing: -0.02em;
102      margin-bottom: 1rem;
103      background: -webkit-linear-gradient(315deg, #1e293b 25%, #5b21b6);
104      -webkit-background-clip: text;
105      -webkit-text-fill-color: transparent;
106      background-clip: text;
107  }
108  
109  [data-md-color-scheme="slate"] .hero-text {
110      background: -webkit-linear-gradient(135deg, #a78bfa 0%, #7c3aed 50%, #c4b5fd 100%);
111      -webkit-background-clip: text;
112      -webkit-text-fill-color: transparent;
113      background-clip: text;
114  }
115  
116  .hero-subtitle {
117      font-size: 1.25rem;
118      color: #64748b;
119      margin-bottom: 2rem;
120      max-width: 640px;
121      margin-left: auto;
122      margin-right: auto;
123      line-height: 1.6;
124  }
125  
126  [data-md-color-scheme="slate"] .hero-subtitle {
127      color: #8888a0;
128  }
129  
130  /* ----------------------------------------
131     BUTTONS (Rounder, nicer)
132     ---------------------------------------- */
133  .md-button {
134      border-radius: 50px;
135      font-weight: 600;
136      padding: 0.6em 1.2em;
137      transition: transform 0.2s, box-shadow 0.2s;
138  }
139  
140  .md-button:hover {
141      transform: translateY(-2px);
142      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
143  }
144  
145  .md-button--primary {
146      background-color: #5b21b6 !important;
147      border-color: #5b21b6 !important;
148      color: white !important;
149  }
150  
151  .md-button--primary:hover {
152      background-color: #4c1d95 !important;
153      border-color: #4c1d95 !important;
154  }
155  
156  /* Dark mode buttons - purple gradient */
157  [data-md-color-scheme="slate"] .md-button--primary {
158      background: linear-gradient(135deg, #7c3aed, #a78bfa) !important;
159      border-color: #7c3aed !important;
160      color: #0a0a0f !important;
161  }
162  
163  [data-md-color-scheme="slate"] .md-button--primary:hover {
164      box-shadow: 0 8px 24px rgba(124, 58, 237, 0.3);
165  }
166  
167  [data-md-color-scheme="slate"] .md-button:not(.md-button--primary) {
168      border-color: #2a2a3a;
169      color: #f0f0f5;
170  }
171  
172  [data-md-color-scheme="slate"] .md-button:not(.md-button--primary):hover {
173      border-color: #a78bfa;
174      background: rgba(167, 139, 250, 0.1);
175  }
176  
177  /* ----------------------------------------
178     ADMONITIONS (Modern Pill Style)
179     ---------------------------------------- */
180  .md-typeset .admonition,
181  .md-typeset details {
182      border-radius: 8px;
183      border: 1px solid rgba(0, 0, 0, 0.1);
184      box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
185      background: white;
186      border-left-width: 4px;
187  }
188  
189  [data-md-color-scheme="slate"] .md-typeset .admonition,
190  [data-md-color-scheme="slate"] .md-typeset details {
191      background: var(--md-default-bg-color);
192      border-color: rgba(255, 255, 255, 0.1);
193  }
194  
195  .md-typeset .admonition-title {
196      font-weight: 600;
197  }
198  
199  .md-typeset .admonition.note {
200      border-left-color: #5b21b6;
201  }
202  
203  .md-typeset .admonition.tip,
204  .md-typeset .admonition.success {
205      border-left-color: #10b981;
206  }
207  
208  .md-typeset .admonition.warning {
209      border-left-color: #f59e0b;
210  }
211  
212  .md-typeset .admonition.danger {
213      border-left-color: #ef4444;
214  }
215  
216  /* ----------------------------------------
217     CODE BLOCKS
218     ---------------------------------------- */
219  .md-typeset pre {
220      border-radius: 8px;
221      border: 1px solid var(--md-default-fg-color--lightest);
222  }
223  
224  .md-typeset pre > code {
225      border-radius: 8px;
226      font-family: "JetBrains Mono", monospace;
227      font-size: 0.85em;
228  }
229  
230  .md-typeset code {
231      font-size: 0.85em;
232      padding: 0.1em 0.3em;
233      border-radius: 4px;
234  }
235  
236  /* ----------------------------------------
237     GRID CARDS
238     ---------------------------------------- */
239  .md-typeset .grid {
240      display: grid;
241      grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
242      gap: 1rem;
243      margin: 1.5rem 0;
244  }
245  
246  .md-typeset .grid.cards > ul {
247      display: contents;
248      list-style: none;
249      margin: 0;
250      padding: 0;
251  }
252  
253  .md-typeset .grid.cards > ul > li,
254  .md-typeset .grid > .card {
255      display: flex;
256      flex-direction: column;
257      padding: 1.25rem 1.5rem;
258      border: 1px solid #e5e7eb;
259      border-radius: 12px;
260      background: white;
261      transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
262  }
263  
264  [data-md-color-scheme="slate"] .md-typeset .grid.cards > ul > li,
265  [data-md-color-scheme="slate"] .md-typeset .grid > .card {
266      background: #16161f;
267      border-color: #2a2a3a;
268  }
269  
270  .md-typeset .grid.cards > ul > li:hover,
271  .md-typeset .grid > .card:hover {
272      border-color: #5b21b6;
273      box-shadow: 0 8px 24px rgba(91, 33, 182, 0.12);
274      transform: translateY(-2px);
275  }
276  
277  [data-md-color-scheme="slate"] .md-typeset .grid.cards > ul > li:hover,
278  [data-md-color-scheme="slate"] .md-typeset .grid > .card:hover {
279      border-color: #a78bfa;
280      box-shadow: 0 8px 24px rgba(167, 139, 250, 0.15);
281  }
282  
283  .md-typeset .grid.cards > ul > li > hr,
284  .md-typeset .grid > .card > hr {
285      margin: 0.75rem 0;
286      border: 0;
287      border-top: 1px solid #e5e7eb;
288  }
289  
290  [data-md-color-scheme="slate"] .md-typeset .grid.cards > ul > li > hr {
291      border-top-color: #2a2a3a;
292  }
293  
294  .md-typeset .grid.cards > ul > li > :first-child,
295  .md-typeset .grid > .card > :first-child {
296      margin-top: 0;
297  }
298  
299  .md-typeset .grid.cards > ul > li > :last-child,
300  .md-typeset .grid > .card > :last-child {
301      margin-bottom: 0;
302  }
303  
304  /* Icon styling in cards */
305  .md-typeset .grid.cards .twemoji,
306  .md-typeset .grid .twemoji {
307      width: 1.5rem;
308      height: 1.5rem;
309      margin-right: 0.5rem;
310      vertical-align: middle;
311  }
312  
313  /* ----------------------------------------
314     STATUS ICONS
315     ---------------------------------------- */
316  .md-typeset .green {
317      color: #22c55e;
318  }
319  
320  [data-md-color-scheme="slate"] .md-typeset .green {
321      color: #a78bfa;
322  }
323  
324  .md-typeset .yellow {
325      color: #f59e0b;
326  }
327  
328  .md-typeset .red {
329      color: #ef4444;
330  }
331  
332  /* ----------------------------------------
333     TABLES
334     ---------------------------------------- */
335  .md-typeset table:not([class]) {
336      border-radius: 8px;
337      overflow: hidden;
338      border: 1px solid #e5e7eb;
339  }
340  
341  [data-md-color-scheme="slate"] .md-typeset table:not([class]) {
342      border-color: #2a2a3a;
343  }
344  
345  .md-typeset table:not([class]) th {
346      font-weight: 600;
347      font-size: 0.8rem;
348      text-transform: uppercase;
349      letter-spacing: 0.05em;
350      background: #f8fafc;
351  }
352  
353  [data-md-color-scheme="slate"] .md-typeset table:not([class]) th {
354      background: #16161f;
355  }
356  
357  /* ----------------------------------------
358     CONTENT TABS
359     ---------------------------------------- */
360  .md-typeset .tabbed-labels > label {
361      font-weight: 500;
362      font-size: 0.85rem;
363      border-radius: 4px 4px 0 0;
364  }
365  
366  .md-typeset .tabbed-content {
367      border-radius: 0 0 8px 8px;
368  }
369  
370  /* ----------------------------------------
371     NAVIGATION
372     ---------------------------------------- */
373  .md-nav__link {
374      font-size: 0.85rem;
375  }
376  
377  /* ----------------------------------------
378     MERMAID DIAGRAMS
379     ---------------------------------------- */
380  .mermaid {
381      background: transparent;
382      margin: 1rem 0;
383  }
384  
385  [data-md-color-scheme="slate"] .mermaid {
386      --mermaid-font-family: "Inter", sans-serif;
387  }
388  
389  /* ----------------------------------------
390     CUSTOM BADGES
391     ---------------------------------------- */
392  .beta-badge {
393      display: inline-block;
394      padding: 0.2em 0.6em;
395      font-size: 0.7rem;
396      font-weight: 600;
397      text-transform: uppercase;
398      letter-spacing: 0.05em;
399      background: #f59e0b;
400      color: white;
401      border-radius: 4px;
402  }
403  
404  /* ----------------------------------------
405     HORIZONTAL RULES
406     ---------------------------------------- */
407  .md-typeset hr {
408      border-color: var(--md-default-fg-color--lightest);
409  }
410  
411  
412  /* ----------------------------------------
413     RESPONSIVE
414     ---------------------------------------- */
415  @media screen and (max-width: 76.1875em) {
416      .hero-text {
417          font-size: 2rem;
418      }
419  
420      .hero-subtitle {
421          font-size: 1rem;
422      }
423  }