File size: 4,250 Bytes
6afedde
 
 
 
 
fd6b678
6afedde
 
 
 
fd6b678
6afedde
 
4ac9663
6afedde
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
d7f24b9
 
 
 
 
6afedde
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
/* ============================================================================ */
/* Design Tokens */
/* ============================================================================ */
:root {
  /* Neutrals */
  --neutral-900: rgb(17, 24, 39);
  --neutral-600: rgb(107, 114, 128);
  --neutral-400: rgb(185, 185, 185);
  --neutral-300: rgb(228, 228, 228);
  --neutral-200: rgb(245, 245, 245);
  --neutral-50: rgb(249, 250, 251);

  --default-font-family: Source Sans Pro, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  /* Brand (OKLCH base + derived states) */
  --primary-base: oklch(0.75 0.12 47);
  --primary-color: var(--primary-base);
  --primary-color-hover: oklch(from var(--primary-color) calc(l - 0.05) c h);
  --primary-color-active: oklch(from var(--primary-color) calc(l - 0.10) c h);
  --on-primary: #ffffff;

  /* Semantic colors */
  --danger-color: oklch(0.65 0.19 25);
  --success-color: oklch(0.65 0.15 145);
  --info-color: oklch(0.65 0.12 230);

  /* Text & Surfaces */
  --page-bg: #fff;
  --surface-bg: #f9f9f9;
  --text-color: rgba(0, 0, 0, .85);
  --transparent-page-contrast: rgba(255, 255, 255, .85);
  --muted-color: rgba(0, 0, 0, .6);
  --border-color: rgba(0, 0, 0, .1);
  --code-bg: #f6f8fa;

  /* Links */
  --link-underline: var(--primary-color);
  --link-underline-hover: var(--primary-color-hover);

  /* Spacing scale */
  --spacing-1: 8px;
  --spacing-2: 12px;
  --spacing-3: 16px;
  --spacing-4: 24px;
  --spacing-5: 32px;
  --spacing-6: 40px;
  --spacing-7: 48px;
  --spacing-8: 56px;
  --spacing-9: 64px;
  --spacing-10: 72px;

  /* Custom Media aliases compiled by PostCSS */
  @custom-media --bp-xxs (max-width: 320px);
  @custom-media --bp-xs (max-width: 480px);
  @custom-media --bp-sm (max-width: 640px);
  @custom-media --bp-md (max-width: 768px);
  @custom-media --bp-lg (max-width: 1024px);
  @custom-media --bp-xl (max-width: 1280px);
  @custom-media --bp-content-collapse (max-width: 1100px);
  /* Article grid tiers, see _grid.css */
  @custom-media --bp-margin (min-width: 1280px);
  @custom-media --bp-margin-inline (max-width: 1279px);
  /* Hero meta columns: 2x2 below this width, stacked below --bp-xs */
  @custom-media --bp-meta-grid (max-width: 860px);

  /* Layout */
  --content-padding-x: 16px;
  /* default page gutter */
  --block-spacing-y: var(--spacing-4);
  /* default vertical spacing between block components */

  /* Config */
  --palette-count: 8;

  /* Button tokens */
  --button-radius: 6px;
  --button-padding-x: 16px;
  --button-padding-y: 10px;
  --button-font-size: 14px;
  --button-icon-padding: 8px;
  /* Big button */
  --button-big-padding-x: 16px;
  --button-big-padding-y: 12px;
  --button-big-font-size: 16px;
  --button-big-icon-padding: 12px;

  /* Table tokens */
  --table-border-radius: 8px;
  --table-header-bg: oklch(from var(--surface-bg) calc(l - 0.02) c h);
  --table-row-odd-bg: oklch(from var(--surface-bg) calc(l - 0.01) c h);

  /* Z-index */
  --z-base: 0;
  --z-content: 1;
  --z-elevated: 10;
  --z-overlay: 1000;
  --z-modal: 1100;
  --z-tooltip: 1200;

  /* Charts (global) */
  --axis-color: var(--muted-color);
  --tick-color: var(--text-color);
  --grid-color: rgba(0, 0, 0, .08);
}

/* ============================================================================ */
/* Dark Theme Overrides */
/* ============================================================================ */
[data-theme="dark"] {
  --page-bg: #0f1115;
  --surface-bg: #07080a;
  --text-color: rgba(255, 255, 255, .9);
  --muted-color: rgba(255, 255, 255, .7);
  --border-color: rgba(255, 255, 255, .15);
  --code-bg: #12151b;
  --transparent-page-contrast: rgba(0, 0, 0, .85);

  /* Charts (global) */
  --axis-color: var(--muted-color);
  --tick-color: var(--muted-color);
  --grid-color: rgba(255, 255, 255, .10);

  /* Primary (lower L in dark) */
  --primary-color-hover: oklch(from var(--primary-color) calc(l - 0.05) c h);
  --primary-color-active: oklch(from var(--primary-color) calc(l - 0.10) c h);
  --on-primary: #0f1115;

  color-scheme: dark;
  background: var(--page-bg);
}