theme.css148 lines · main

1	/*
2	* briven — design token source of truth.
3	*
4	* Import once per app:
5	* @import "@briven/config/tailwind/theme.css";
6	*
7	* Never hard-code hex values in components. Never override these tokens locally.
8	* See BRAND.md §3.2 for rationale and contrast targets.
9	*/
10
11	@import 'tailwindcss';
12
13	@theme {
14	/* ── Surfaces ───────────────────────────────────────────────── */
15	--color-bg: #0a0b0d;
16	--color-surface: #13151a;
17	--color-surface-raised: #1b1e25;
18	--color-surface-overlay: #232731;
19	--color-surface-inverse: #f5f7fa;
20
21	/* ── Borders ────────────────────────────────────────────────── */
22	--color-border: #2a2e36;
23	--color-border-subtle: #1e2128;
24	--color-border-strong: #3a3f4a;
25	--color-border-primary: #00e87a4d;
26
27	/* ── Text ───────────────────────────────────────────────────── */
28	--color-text: #f5f7fa;
29	--color-text-muted: #9ba3af;
30	--color-text-subtle: #6b7280;
31	--color-text-inverse: #0a0b0d;
32	--color-text-link: #00e87a;
33
34	/* ── Brand / primary ────────────────────────────────────────── */
35	--color-primary: #00e87a;
36	--color-primary-hover: #1af08a;
37	--color-primary-pressed: #00c968;
38	--color-primary-subtle: #00e87a1a;
39	--color-primary-ghost: #00e87a0d;
40
41	/* ── Semantic ───────────────────────────────────────────────── */
42	--color-success: #00e87a;
43	--color-warning: #ffb020;
44	--color-error: #ff4757;
45	--color-info: #5b9fff;
46
47	/* ── Code & logs ────────────────────────────────────────────── */
48	--color-code-bg: #0f1115;
49	--color-code-text: #e6edf3;
50	--color-code-comment: #6b7280;
51	--color-code-keyword: #ff7a9f;
52	--color-code-string: #9dffa8;
53	--color-code-number: #ffb86b;
54	--color-code-fn: #5b9fff;
55
56	/* ── Shadows ────────────────────────────────────────────────── */
57	--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3);
58	--shadow-md: 0 4px 12px -2px rgb(0 0 0 / 0.4);
59	--shadow-lg: 0 12px 32px -8px rgb(0 0 0 / 0.5);
60	--shadow-glow: 0 0 0 1px #00e87a33, 0 0 24px 0 #00e87a1a;
61
62	/* ── Radius ─────────────────────────────────────────────────── */
63	--radius-sm: 6px;
64	--radius-md: 10px;
65	--radius-lg: 14px;
66	--radius-xl: 20px;
67	--radius-full: 9999px;
68
69	/* ── Typography ─────────────────────────────────────────────── */
70	--font-sans: 'Geist', system-ui, sans-serif;
71	--font-mono: 'Geist Mono', ui-monospace, SFMono-Regular, monospace;
72
73	--text-display-1: 4.5rem;
74	--text-display-2: 3.5rem;
75	--text-display-3: 2.75rem;
76	--text-h1: 2rem;
77	--text-h2: 1.5rem;
78	--text-h3: 1.25rem;
79	--text-body: 1rem;
80	--text-small: 0.875rem;
81	--text-xs: 0.75rem;
82
83	/* ── Motion ─────────────────────────────────────────────────── */
84	--ease-briven: cubic-bezier(0.16, 1, 0.3, 1);
85	--duration-fast: 150ms;
86	--duration-page: 220ms;
87	}
88
89	/* Dark-theme only. No @media (prefers-color-scheme: light) override.
90	If a third-party embed needs a neutral surface, use surface-inverse deliberately. */
91	html {
92	color-scheme: dark;
93	background-color: var(--color-bg);
94	color: var(--color-text);
95	}
96
97	body {
98	font-family: var(--font-sans);
99	font-feature-settings: 'ss01', 'cv11';
100	-webkit-font-smoothing: antialiased;
101	-moz-osx-font-smoothing: grayscale;
102	}
103
104	::selection {
105	background-color: var(--color-primary-subtle);
106	color: var(--color-text);
107	}
108
109	*:focus-visible {
110	outline: 2px solid var(--color-primary);
111	outline-offset: 2px;
112	border-radius: var(--radius-sm);
113	}
114
115	/*
116	* Tailwind v4 no longer ships the default `cursor: pointer` on buttons.
117	* Re-add it platform-wide so every clickable surface (buttons, anchors,
118	* aria role=button) signals affordance. Disabled elements opt out.
119	*/
120	button:not(:disabled),
121	a[href],
122	[role='button']:not([aria-disabled='true']),
123	summary,
124	label[for],
125	select:not(:disabled),
126	input[type='submit']:not(:disabled),
127	input[type='button']:not(:disabled),
128	input[type='reset']:not(:disabled),
129	input[type='checkbox']:not(:disabled),
130	input[type='radio']:not(:disabled) {
131	cursor: pointer;
132	}
133
134	button:disabled,
135	[role='button'][aria-disabled='true'] {
136	cursor: not-allowed;
137	}
138
139	@media (prefers-reduced-motion: reduce) {
140	*,
141	*::before,
142	*::after {
143	animation-duration: 0.01ms !important;
144	animation-iteration-count: 1 !important;
145	transition-duration: 0.01ms !important;
146	scroll-behavior: auto !important;
147	}
148	}