tonalscale/src/styles/main.css at main · cotedav/tonalscale · GitHub

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
@import '@fontsource-variable/inter/index.css';

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    color-scheme: light;
    --content-width: 1100px;

    /* Light Mode Palette */
    --color-surface: 255 255 255;
    /* #ffffff */
    --color-surface-strong: 248 250 252;
    /* Slate 50 */
    --color-surface-soft: 241 245 249;
    /* Slate 100 */

    --color-text-primary: 15 23 42;
    /* Slate 900 */
    --color-text-secondary: 71 85 105;
    /* Slate 600 */
    --color-text-tertiary: 148 163 184;
    /* Slate 400 */

    --color-border-dim: 226 232 240;
    /* Slate 200 */
    --color-border-highlight: 203 213 225;
    /* Slate 300 */
    --color-border-glass: 15 23 42;
    /* Slate 900 (for alpha) */

    --color-accent: 168 85 247;
    /* #a855f7 (Purple 500) */
    --color-accent-strong: 124 58 237;
    /* #7c3aed (Purple 600) */
    --color-accent-soft: 196 181 253;
    /* #c4b5fd (Purple 300) */
  }

  .dark {
    color-scheme: dark;

    /* Dark Mode Palette */
    --color-surface: 12 18 36;
    /* #0c1224 */
    --color-surface-strong: 15 23 42;
    /* #0f172a */
    --color-surface-soft: 17 26 47;
    /* #111a2f */

    --color-text-primary: 241 245 249;
    /* Slate 100 */
    --color-text-secondary: 148 163 184;
    /* Slate 400 */
    --color-text-tertiary: 100 116 139;
    /* Slate 500 */

    --color-border-dim: 30 41 59;
    /* Slate 800 */
    --color-border-highlight: 51 65 85;
    /* Slate 700 */
    --color-border-glass: 255 255 255;
    /* White (for alpha) */

    --color-accent: 168 85 247;
    /* #a855f7 */
    --color-accent-strong: 124 58 237;
    /* #7c3aed */
    --color-accent-soft: 196 181 253;
    /* #c4b5fd */
  }

  body {
    @apply bg-surface-strong text-slate-800 dark:text-slate-100 antialiased transition-colors duration-300;
  }

  a {
    @apply text-accent hover:text-accent-soft transition-colors;
  }
}

@layer components {
  .card-surface {
    @apply rounded-2xl border border-slate-800/70 bg-surface-soft/70 p-6 shadow-card backdrop-blur;
  }

  .section-title {
    @apply text-xl font-semibold text-slate-50;
  }

  .section-subtitle {
    @apply text-sm text-slate-400;
  }
}