Sunstead trust scoring project
1/* Six-layer cascade discipline. Earlier layers lose to later ones, so source
2 order inside a layer stops mattering across concerns. */
3@layer reset, tokens, base, components, utilities, overrides;
4
5@layer reset {
6 *,
7 *::before,
8 *::after {
9 box-sizing: border-box;
10 }
11 * {
12 margin: 0;
13 }
14 body {
15 -webkit-font-smoothing: antialiased;
16 }
17 button,
18 input,
19 select {
20 font: inherit;
21 color: inherit;
22 }
23 a {
24 color: inherit;
25 text-decoration: none;
26 }
27}
28
29@layer tokens {
30 :root {
31 color-scheme: dark;
32
33 --bg: #0a0c10;
34 --surface: #11151c;
35 --surface-2: #161b24;
36 --surface-3: #1d242f;
37 --line: #232b36;
38 --line-strong: #303a48;
39
40 --fg: #e6edf3;
41 --fg-muted: #9aa7b4;
42 --fg-dim: #647084;
43
44 --accent: #4c8dff;
45 --accent-dim: #1f3354;
46
47 --fast: #3fb950;
48 --fast-dim: #11331b;
49 --normal: #d8a226;
50 --normal-dim: #3a2e0d;
51 --danger: #f4604e;
52 --danger-dim: #3d1714;
53
54 --r-sm: 6px;
55 --r: 10px;
56 --r-lg: 14px;
57 --pill: 999px;
58
59 --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
60 --sans: system-ui, -apple-system, "Segoe UI", sans-serif;
61
62 --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.25);
63 }
64}
65
66@layer base {
67 body {
68 background: var(--bg);
69 color: var(--fg);
70 font: 14px/1.55 var(--sans);
71 min-height: 100vh;
72 }
73 h1,
74 h2,
75 h3 {
76 font-weight: 650;
77 line-height: 1.2;
78 }
79 ::selection {
80 background: var(--accent-dim);
81 }
82 /* tabular numbers everywhere figures line up in tables/metrics */
83 table,
84 .num {
85 font-variant-numeric: tabular-nums;
86 }
87 ::-webkit-scrollbar {
88 width: 10px;
89 height: 10px;
90 }
91 ::-webkit-scrollbar-thumb {
92 background: var(--line-strong);
93 border-radius: var(--pill);
94 border: 2px solid var(--bg);
95 }
96}
97
98@layer components {
99 .card {
100 background: var(--surface);
101 border: 1px solid var(--line);
102 border-radius: var(--r-lg);
103 box-shadow: var(--shadow);
104 }
105 .chip {
106 display: inline-flex;
107 align-items: center;
108 gap: 5px;
109 padding: 2px 9px;
110 border-radius: var(--pill);
111 background: var(--surface-3);
112 border: 1px solid var(--line);
113 color: var(--fg-muted);
114 font-size: 12px;
115 white-space: nowrap;
116 }
117 .mono {
118 font-family: var(--mono);
119 }
120 .muted {
121 color: var(--fg-muted);
122 }
123 .dim {
124 color: var(--fg-dim);
125 }
126}
127
128@layer utilities {
129 .row {
130 display: flex;
131 align-items: center;
132 gap: 10px;
133 }
134 .wrap {
135 flex-wrap: wrap;
136 }
137 .grow {
138 flex: 1;
139 }
140 .stack {
141 display: flex;
142 flex-direction: column;
143 gap: 6px;
144 }
145 .truncate {
146 overflow: hidden;
147 text-overflow: ellipsis;
148 white-space: nowrap;
149 }
150}
151
152@layer overrides {
153 /* Reserved for one-off escapes from component styling. Empty by design the
154 six layers above carry the weight; overrides should stay near-empty. */
155 [hidden] {
156 display: none !important;
157 }
158}