1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
|
/* ============================================================
Pantograph — base element styling
------------------------------------------------------------
A light, opinionated reset that binds the tokens to real
elements. Optional for consumers, but every specimen card,
component card, and UI kit in this system assumes it.
============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
margin: 0;
background-color: var(--surface-page);
color: var(--text-body);
font: var(--role-body);
letter-spacing: var(--tracking-normal);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
/* Headings default to the engraved display voice */
h1, h2, h3, h4, h5, h6 {
margin: 0 0 var(--space-3);
color: var(--text-strong);
font-family: var(--font-sans);
font-weight: var(--weight-semibold);
line-height: var(--leading-snug);
letter-spacing: var(--tracking-tight);
text-wrap: balance;
}
h1 { font: var(--role-h1); letter-spacing: var(--tracking-tight); }
h2 { font: var(--role-h2); }
h3 { font: var(--role-h3); }
p { margin: 0 0 var(--space-4); text-wrap: pretty; }
a {
color: var(--link);
text-decoration: none;
text-underline-offset: 0.18em;
text-decoration-thickness: 1px;
transition: color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--link-hover); text-decoration: underline; }
strong, b { font-weight: var(--weight-semibold); color: var(--text-strong); }
code, kbd, samp, pre {
font-family: var(--font-mono);
font-size: 0.92em;
}
code {
background: var(--surface-code);
border: var(--border-thin) solid var(--border-hairline);
border-radius: var(--radius-xs);
padding: 0.08em 0.36em;
color: var(--ink-1);
}
pre {
font-size: var(--text-sm);
line-height: var(--leading-mono);
margin: 0;
}
pre code { background: none; border: none; padding: 0; }
hr {
border: 0;
height: 1px;
background: var(--border-hairline);
margin: var(--space-6) 0;
}
/* The engraved-tick rule: THE standard section separator.
Short ticks with every 5th at double height (see
--tick-gradient in tokens/spacing.css). Height = the tall
tick; short ticks center on the same axis. */
.panto-tick-rule {
border: 0;
height: var(--tick-h-major);
background: var(--tick-gradient);
opacity: 0.85;
margin: var(--space-6) 0;
}
::selection { background: var(--green-soft); color: var(--ink-0); }
:focus-visible {
outline: var(--border-thick) solid var(--focus-ring);
outline-offset: 2px;
}
/* Long-form documentation prose — the primary face, set larger
and looser for comfortable reading */
.panto-prose {
font: var(--role-prose);
color: var(--text-body);
max-width: var(--container-prose);
}
.panto-prose p { margin-bottom: var(--space-5); }
/* Engraved eyebrow / kicker label */
.panto-eyebrow {
font-family: var(--font-display);
font-weight: var(--weight-semibold);
font-size: var(--text-xs);
letter-spacing: var(--tracking-label);
text-transform: uppercase;
color: var(--text-faint);
}
|
