~cytrogen/blog-public

blog-public/css/variables.css -rw-r--r-- 3.0 KiB
88eebf3d — Cytrogen Deploy 2026-02-19 08:34:27 3 days ago 
                                                                                
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
:root {
  --color-primary: #5454f8;
  --color-secondary: #267B54;
  --color-accent: #4088b8;
  --color-success: #22c55e;
  --color-warning: #f59e0b;
  --color-danger: #ef4444;
  --text-primary: #2c3e50; /* Main text - WCAG AA compliant on white */
  --text-secondary: #64748b; /* Supporting text - improved contrast */
  --text-tertiary: #94a3b8; /* Muted text */
  --text-inverse: #ffffff; /* Text on dark backgrounds */
  --surface-background: #ffffff;
  --surface-elevated: #f8fafc; /* Cards, dropdowns */
  --surface-overlay: #f1f5f9; /* Modals, overlays */
  --surface-interactive: #e2e8f0; /* Hover states */
  --border-primary: #e2e8f0; /* Main borders */
  --border-secondary: #cbd5e1; /* Subtle borders */
  --border-interactive: var(--color-primary); /* Focus, active borders */
  --code-background: #f8fafc;
  --code-text: #475569;
  --code-keyword: #e96900; /* Light theme uses orange */
  --code-string: #22c55e;
  --code-number: #8b5cf6;
  --code-comment: #94a3b8;
  --color-primary-hover: color-mix(in srgb, var(--color-primary) 85%, black);
  --color-secondary-hover: color-mix(in srgb, var(--color-secondary) 85%, black);
  --surface-interactive-hover: color-mix(in srgb, var(--surface-interactive) 80%, var(--color-primary));
  --font-size-body: clamp(1.125rem, 1rem + 0.6vw, 1.375rem); /* ~18px to 22px */
  --spacing-paragraph: clamp(1rem, 0.8rem + 0.4vw, 1.5rem); /* 1rem to 1.5rem */
  --font-size-h1: clamp(2.25rem, 1.75rem + 2.8vw, 3.5rem); /* ~36px to 56px */
  --font-size-h2-h3: clamp(1.5rem, 1.3rem + 1vw, 2.125rem); /* ~24px to 34px */
  --font-size-h4-h6: clamp(1.25rem, 1.1rem + 0.75vw, 1.625rem); /* ~20px to 26px */
  --font-size-nav: clamp(1rem, 0.95rem + 0.15vw, 1.125rem); /* ~16px to 18px */
  --font-size-small: clamp(0.875rem, 0.8rem + 0.3vw, 1rem); /* ~14px to 16px */
  --font-size-code: clamp(1rem, 0.95rem + 0.4vw, 1.25rem); /* Increased to match body text better */
}

[data-theme=dark] {
  --color-primary: #818cf8; /* Higher contrast on dark */
  --color-secondary: #34d399;
  --color-accent: #60a5fa;
  --color-success: #10b981;
  --color-warning: #f59e0b;
  --color-danger: #f87171;
  --text-primary: #f1f5f9; /* 15.3:1 contrast ratio */
  --text-secondary: #cbd5e1; /* 10.4:1 contrast ratio */
  --text-tertiary: #94a3b8; /* 6.1:1 contrast ratio */
  --text-inverse: #0f172a;
  --surface-background: #0f172a; /* Dark navy for better contrast */
  --surface-elevated: #1e293b; /* Elevated surfaces */
  --surface-overlay: #334155; /* Overlays and modals */
  --surface-interactive: #475569; /* Interactive elements */
  --border-primary: #334155; /* Visible borders */
  --border-secondary: #1e293b; /* Subtle separators */
  --code-background: #1e293b;
  --code-text: #e2e8f0;
  --code-keyword: #60a5fa;
  --code-string: #34d399;
  --code-number: #a78bfa;
  --code-comment: #64748b;
  --color-primary-hover: color-mix(in srgb, var(--color-primary) 80%, white);
  --color-secondary-hover: color-mix(in srgb, var(--color-secondary) 80%, white);
  --surface-interactive-hover: color-mix(in srgb, var(--surface-interactive) 70%, var(--color-primary));
}