1
@import "tailwindcss";
2
 
3
@font-face {
4
  font-family: "Hanken Grotesk";
5
  font-style: normal;
6
  font-weight: 400 700;
7
  font-display: swap;
8
  src: url("./fonts/hanken-grotesk-latin-wght-normal.woff2") format("woff2");
9
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
10
}
11
 
12
@font-face {
13
  font-family: "JetBrains Mono";
14
  font-style: normal;
15
  font-weight: 400 500;
16
  font-display: swap;
17
  src: url("./fonts/jetbrains-mono-latin-wght-normal.woff2") format("woff2");
18
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
19
}
20
 
21
@theme {
22
  --font-sans: "Hanken Grotesk", ui-sans-serif, system-ui, -apple-system, sans-serif;
23
  --font-mono: "JetBrains Mono", "SF Mono", monospace;
24
  --color-canvas: #221f21;
25
  --color-chrome: #1b181a;
26
  --color-surface: #2a2729;
27
  --color-line: #423f42;
28
  --color-foreground: #f5f4f4;
29
  --color-muted: #a3a1a8;
30
  --color-success: #9bd7a7;
31
  --color-warning: #e9c581;
32
  --color-danger: #f9a2a2;
33
  --color-zinc-50: #fafaf9;
34
  --color-zinc-100: #f5f4f4;
35
  --color-zinc-200: #e5e4e5;
36
  --color-zinc-300: #d6d4d7;
37
  --color-zinc-400: #a3a1a8;
38
  --color-zinc-500: #747178;
39
  --color-zinc-600: #555259;
40
  --color-zinc-700: #423f42;
41
  --color-zinc-800: #2a2729;
42
  --color-zinc-900: #1b181a;
43
  --color-zinc-950: #0c090b;
44
  --color-accent-50: #eefafb;
45
  --color-accent-100: #d6f2f5;
46
  --color-accent-200: #ade4e9;
47
  --color-accent-300: #7cd1dc;
48
  --color-accent-400: #57bfcd;
49
  --color-accent-500: #3bafbe;
50
  --color-accent-600: #2c8795;
51
  --color-accent-700: #256b77;
52
  --color-accent-800: #245762;
53
  --color-accent-900: #224954;
54
  --default-transition-duration: 75ms;
55
}
56
 
57
@layer base {
58
  :root {
59
    color-scheme: dark;
60
    font-synthesis: none;
61
  }
62
 
63
  body {
64
    margin: 0;
65
    background: var(--color-canvas);
66
    color: var(--color-foreground);
67
    font-family: var(--font-sans);
68
    font-size: 0.9375rem;
69
    font-weight: 450;
70
    line-height: 1.5;
71
    -webkit-font-smoothing: antialiased;
72
  }
73
 
74
  button:not(:disabled), summary, select:not(:disabled) {
75
    cursor: pointer;
76
  }
77
 
78
  :focus-visible {
79
    outline: 2px solid var(--color-accent-300);
80
    outline-offset: 3px;
81
  }
82
 
83
  ::selection {
84
    background: var(--color-accent-800);
85
    color: var(--color-accent-50);
86
  }
87
 
88
  body, .overflow-x-auto {
89
    scrollbar-width: thin;
90
    scrollbar-color: var(--color-zinc-600) transparent;
91
  }
92
}
93
 
94
@media (prefers-reduced-motion: reduce) {
95
  *, *::before, *::after {
96
    animation-duration: 0.01ms !important;
97
    animation-iteration-count: 1 !important;
98
    transition-duration: 0.01ms !important;
99
    scroll-behavior: auto !important;
100
  }
101
}