|
1
|
@import "tailwindcss"; |
|
2
|
|
|
3
|
/* ── Design system, ported from the app (src/App.css) ─────────────────────── */ |
|
4
|
:root { |
|
5
|
--bg: #fafafa; |
|
6
|
--surface: #ffffff; |
|
7
|
--border: #e8e8e8; |
|
8
|
--text-primary: #1a1a1a; |
|
9
|
--text-secondary: #8a8a8a; |
|
10
|
--accent: #2d2d2d; |
|
11
|
--accent-hover: #1a1a1a; |
|
12
|
|
|
13
|
/* Brand green, matching the App Store screenshots and the app's "ready" state */ |
|
14
|
--brand: #06a561; |
|
15
|
--brand-soft: rgba(6, 165, 97, 0.1); |
|
16
|
|
|
17
|
--radius: 18px; |
|
18
|
--radius-sm: 8px; |
|
19
|
|
|
20
|
--font-sans: var(--font-inter), "Inter", -apple-system, BlinkMacSystemFont, |
|
21
|
"Segoe UI", sans-serif; |
|
22
|
} |
|
23
|
|
|
24
|
@media (prefers-color-scheme: dark) { |
|
25
|
:root { |
|
26
|
--bg: #111111; |
|
27
|
--surface: #1c1c1c; |
|
28
|
--border: #2a2a2a; |
|
29
|
--text-primary: #f0f0f0; |
|
30
|
--text-secondary: #666666; |
|
31
|
--accent: #e0e0e0; |
|
32
|
--accent-hover: #ffffff; |
|
33
|
--brand: #34c759; |
|
34
|
--brand-soft: rgba(52, 199, 89, 0.12); |
|
35
|
} |
|
36
|
} |
|
37
|
|
|
38
|
/* Expose the tokens to Tailwind utilities (bg-bg, text-ink, text-brand, …) */ |
|
39
|
@theme inline { |
|
40
|
--color-bg: var(--bg); |
|
41
|
--color-surface: var(--surface); |
|
42
|
--color-border: var(--border); |
|
43
|
--color-ink: var(--text-primary); |
|
44
|
--color-muted: var(--text-secondary); |
|
45
|
--color-accent: var(--accent); |
|
46
|
--color-accent-hover: var(--accent-hover); |
|
47
|
--color-brand: var(--brand); |
|
48
|
--radius-card: var(--radius); |
|
49
|
--radius-sm: var(--radius-sm); |
|
50
|
--font-sans: var(--font-sans); |
|
51
|
} |
|
52
|
|
|
53
|
*, |
|
54
|
*::before, |
|
55
|
*::after { |
|
56
|
box-sizing: border-box; |
|
57
|
} |
|
58
|
|
|
59
|
html { |
|
60
|
scroll-behavior: smooth; |
|
61
|
} |
|
62
|
|
|
63
|
body { |
|
64
|
background: var(--bg); |
|
65
|
color: var(--text-primary); |
|
66
|
font-family: var(--font-sans); |
|
67
|
font-size: 15px; |
|
68
|
line-height: 1.5; |
|
69
|
-webkit-font-smoothing: antialiased; |
|
70
|
} |
|
71
|
|
|
72
|
/* Legal / long-form pages */ |
|
73
|
.prose-legal h2 { |
|
74
|
font-size: 1.25rem; |
|
75
|
font-weight: 600; |
|
76
|
letter-spacing: -0.2px; |
|
77
|
color: var(--text-primary); |
|
78
|
margin-top: 2rem; |
|
79
|
margin-bottom: 0.75rem; |
|
80
|
} |
|
81
|
|
|
82
|
.prose-legal p, |
|
83
|
.prose-legal li { |
|
84
|
color: var(--text-secondary); |
|
85
|
line-height: 1.7; |
|
86
|
margin-bottom: 0.75rem; |
|
87
|
} |
|
88
|
|
|
89
|
.prose-legal ul { |
|
90
|
list-style: disc; |
|
91
|
padding-left: 1.25rem; |
|
92
|
} |