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
/* Every rule here reads a type token for family and size. Weight, line-height,
   and letter-spacing are hardcoded to the exact numbers the source ships —
   there is no `--gl-weight-*` / `--gl-leading-*` / `--gl-tracking-*` scale in
   the real system, only eight fixed compound styles (see the Typography
   foundation page, which this file implements verbatim). */

.type-display { font: 600 var(--gl-step-4)/1.08 var(--gl-font-sans); letter-spacing: -0.015em; }
.type-h1, h1 { font: 600 var(--gl-step-3)/1.12 var(--gl-font-sans); letter-spacing: -0.012em; }
.type-h2, h2 { font: 600 var(--gl-step-2)/1.16 var(--gl-font-sans); letter-spacing: -0.01em; }
.type-h3, h3 { font: 600 var(--gl-step-1)/1.25 var(--gl-font-sans); }
.type-body    { font: 400 var(--gl-step-0)/1.55 var(--gl-font-sans); }
.type-body-sm { font: 400 var(--gl-step--1)/1.5 var(--gl-font-sans); }
.type-label {
  font: 500 var(--gl-step--2)/1 var(--gl-font-mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gl-color-text-secondary);
}
.type-mono { font: 400 var(--gl-step--1)/1.5 var(--gl-font-mono); }

/* Prose defaults for the documentation body copy. These read the same
   tokens the compound classes above do; they are not a second scale. */
h1, h2, h3, h4 { font-weight: 600; text-wrap: balance; }

h4 { font: 600 var(--gl-step-0)/1.3 var(--gl-font-sans); }

p, ul, ol { margin: 0 0 var(--gl-space-s); }
li + li { margin-top: var(--gl-space-3xs); }

a {
  color: var(--gl-color-accent);
  text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
  transition: color var(--gl-dur-fast) var(--gl-ease),
              text-decoration-color var(--gl-dur-fast) var(--gl-ease);
}
a:hover {
  color: var(--gl-color-accent-ink);
  text-decoration-color: currentColor;
}

strong, b { font-weight: 600; }

small { font-size: var(--gl-step--1); }

.gl-lead {
  font-size: var(--gl-step-1);
  line-height: 1.5;
  color: var(--gl-color-text-secondary);
  max-width: 68ch;
  text-wrap: pretty;
}

.gl-muted { color: var(--gl-color-text-secondary); }
.gl-subtle { color: var(--gl-color-text-tertiary); }

code, kbd, samp, pre {
  font-family: var(--gl-font-mono);
  font-feature-settings: "liga" 0;
}

:not(pre) > code {
  padding: 0.15em 0.4em;
  font-size: 0.875em;
  background: var(--gl-color-surface-fill);
  border: 1px solid var(--gl-color-border-hairline);
  border-radius: var(--gl-radius-sm);
  white-space: nowrap;
}

kbd {
  display: inline-block;
  padding: 0.1em 0.45em;
  font-size: var(--gl-step--2);
  line-height: 1.6;
  background: var(--gl-color-surface-card);
  border: 1px solid var(--gl-color-border-default);
  border-bottom-width: 2px;
  border-radius: var(--gl-radius-sm);
  color: var(--gl-color-text-secondary);
}

blockquote {
  margin-block: var(--gl-space-s);
  padding-left: var(--gl-space-s);
  border-left: 2px solid var(--gl-color-accent);
  color: var(--gl-color-text-secondary);
}