A server-side link shortening service powered by Linkat
ewancroft.uk
1@import 'tailwindcss';
2
3/*
4 * Semantic Color System - Green-hued theme optimized for Light/Dark Modes
5 * Based on forest green palette with excellent contrast and readability
6 */
7
8:root {
9 /* Light Mode - Darker, more subdued palette */
10 --color-background: 237 247 237; /* Soft gray-green background */
11 --color-surface: 220 242 220; /* Darker green-tinted surface */
12 --color-surface-elevated: 200 230 200; /* Medium green surface */
13
14 --color-text-primary: 5 46 22; /* green-950 - very dark forest green */
15 --color-text-secondary: 22 101 52; /* green-800 */
16 --color-text-tertiary: 21 128 61; /* green-700 */
17
18 --color-border: 160 210 160; /* Darker green border */
19 --color-border-strong: 120 190 120; /* Strong green border */
20
21 /* Primary - Vibrant emerald for links/actions */
22 --color-primary: 5 150 105; /* emerald-600 */
23 --color-primary-hover: 4 120 87; /* emerald-700 */
24
25 /* Success - Rich green */
26 --color-success: 22 163 74; /* green-600 */
27 --color-success-bg: 220 242 220; /* Darker green-50 */
28 --color-success-border: 120 190 120; /* green-300 equivalent */
29
30 /* Error - Strong red for visibility */
31 --color-error: 185 28 28; /* red-700 - darker */
32 --color-error-bg: 254 226 226; /* Darker red-100 */
33 --color-error-border: 248 113 113; /* red-400 */
34
35 /* Code blocks */
36 --color-code-bg: 200 230 200; /* Darker green surface */
37}
38
39.dark {
40 /* Dark Mode - Deep forest green with teal accents */
41 --color-background: 3 15 10; /* Very dark forest green (almost black) */
42 --color-surface: 5 30 20; /* Dark green-tinted */
43 --color-surface-elevated: 10 50 35; /* Medium dark green */
44
45 --color-text-primary: 240 253 244; /* green-50 - bright mint */
46 --color-text-secondary: 187 247 208; /* green-200 */
47 --color-text-tertiary: 134 239 172; /* green-300 */
48
49 --color-border: 22 101 52; /* green-800 */
50 --color-border-strong: 34 197 94; /* green-500 */
51
52 /* Primary - Bright emerald for dark mode */
53 --color-primary: 52 211 153; /* emerald-400 */
54 --color-primary-hover: 110 231 183; /* emerald-300 */
55
56 /* Success - Bright green for dark mode */
57 --color-success: 74 222 128; /* green-400 */
58 --color-success-bg: 5 46 22; /* green-950 */
59 --color-success-border: 34 197 94; /* green-500 */
60
61 /* Error - Softer red for dark mode */
62 --color-error: 248 113 113; /* red-400 */
63 --color-error-bg: 69 10 10; /* red-950 */
64 --color-error-border: 220 38 38; /* red-600 */
65
66 /* Code blocks */
67 --color-code-bg: 5 30 20; /* Dark green-tinted */
68}
69
70/* Apply base background and text colors to html/body */
71html {
72 background-color: rgb(var(--color-background));
73 color: rgb(var(--color-text-primary));
74 min-height: 100vh;
75 transition:
76 background-color 0.3s ease,
77 color 0.3s ease;
78}
79
80body {
81 background-color: rgb(var(--color-background));
82 color: rgb(var(--color-text-primary));
83 min-height: 100vh;
84}
85
86/* Smooth transitions for color changes */
87* {
88 transition-property: background-color, border-color, color, fill, stroke;
89 transition-duration: 0.2s;
90 transition-timing-function: ease;
91}
92
93/* Preserve transform transitions */
94*:where([style*='transform']) {
95 transition-property: background-color, border-color, color, fill, stroke, transform;
96}