Gymnopédies Theme

1@import "tailwindcss";
2 
3@custom-variant dark (&:where(.dark, .dark *));
4 
5/* -------------------------------------------------------------------------- */
6/* Gymnopédies — dark, serif, glow-leaning design tokens                       */
7/*                                                                            */
8/* Legacy primitives (preserved for traceability)                             */
9/*   base   #333333  – the page background                                     */
10/*   main   #35434c  – figure/picture inner fill                               */
11/*   default #999999 – muted body text                                         */
12/*   light  #d6d6d6  – primary body text                                       */
13/*   dark   #04252b  – card / surface raised                                   */
14/*   tone   #cfd8de  – accent / borders / subtle highlights                    */
15/*   link   #d5ca86  – brand accent / links / "primary"                        */
16/* -------------------------------------------------------------------------- */
17 
18:root {
19  /* shadcn semantic tokens — gymnopédies dark default                        */
20  --background: #333333;
21  --foreground: #d6d6d6;
22 
23  --card: #04252b;
24  --card-foreground: #d6d6d6;
25 
26  --popover: #04252b;
27  --popover-foreground: #d6d6d6;
28 
29  --primary: #d5ca86;
30  --primary-foreground: #04252b;
31 
32  --secondary: #35434c;
33  --secondary-foreground: #d6d6d6;
34 
35  --muted: #35434c;
36  --muted-foreground: #999999;
37 
38  --accent: #cfd8de;
39  --accent-foreground: #04252b;
40 
41  --destructive: #d4856a;
42  --destructive-foreground: #04252b;
43 
44  --border: rgba(207, 216, 222, 0.18);
45  --input: rgba(207, 216, 222, 0.18);
46  --ring: #d5ca86;
47 
48  --chart-1: #d5ca86;
49  --chart-2: #cfd8de;
50  --chart-3: #d4856a;
51  --chart-4: #86c2d5;
52  --chart-5: #d6d6d6;
53 
54  --sidebar: #04252b;
55  --sidebar-foreground: #d6d6d6;
56  --sidebar-primary: #d5ca86;
57  --sidebar-primary-foreground: #04252b;
58  --sidebar-accent: #35434c;
59  --sidebar-accent-foreground: #d6d6d6;
60  --sidebar-border: rgba(207, 216, 222, 0.18);
61  --sidebar-ring: #d5ca86;
62 
63  --radius: 0.5rem;
64 
65  /* gymnopédies-only extensions */
66  --color-link: #d5ca86;
67  --color-tone: #cfd8de;
68  --color-light: #d6d6d6;
69  --color-dark: #04252b;
70 
71  --shadow-soft-glow:
72    0 0 16px rgba(207, 216, 222, 0.3), 0 2px 8px rgba(207, 216, 222, 0.2);
73  --shadow-strong-glow:
74    0 0 24px rgba(213, 202, 134, 0.4), 0 4px 16px rgba(213, 202, 134, 0.3);
75  --shadow-neutral: 0 2px 8px rgba(153, 153, 153, 0.15);
76// … truncated