yourdeadnfts/src/styles/tokens.css at main · BORT-AGENTS/yourdeadnfts · 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
/* ══════════════════════════════════════════════════════════
   yourdeadnfts Design System — colors + type tokens
   Source of truth: yourdeadnfts Design System/colors_and_type.css
   ══════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Serif:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600&display=swap');

:root {
  /* ── Palette ────────────────────────────────────────────── */
  --bnb-dark-1: #0a0907;
  --bnb-dark-2: #14120e;
  --bnb-dark-3: #1c1a16;
  --bnb-dark-4: #2a2620;
  --bnb-dark-5: #433d33;

  --bnb-yellow:       #a85a3e;
  --bnb-yellow-hover: #c27550;
  --bnb-green:        #6b8e5c;
  --bnb-red:          #8b2a2a;

  --bnb-text-1: #d9d2bf;
  --bnb-text-2: #8a867b;
  --bnb-text-3: #5c5a51;

  /* ── Semantic ───────────────────────────────────────────── */
  --bg-background:       var(--bnb-dark-1);
  --bg-surface:          var(--bnb-dark-2);
  --bg-card:             var(--bnb-dark-3);
  --bg-elevated:         var(--bnb-dark-4);
  --border-primary:      var(--bnb-dark-4);
  --border-secondary:    var(--bnb-dark-5);
  --color-primary:       var(--bnb-yellow);
  --color-primary-hover: var(--bnb-yellow-hover);
  --color-primary-subtle: rgba(168, 90, 62, 0.08);
  --color-primary-ring:   rgba(168, 90, 62, 0.1);
  --color-accent:        var(--bnb-green);
  --color-danger:        var(--bnb-red);
  --text-main:           var(--bnb-text-1);
  --text-secondary:      var(--bnb-text-2);
  --text-muted:          var(--bnb-text-3);

  /* ── Type families ─────────────────────────────────────── */
  --font-sans:   'IBM Plex Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:   'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --font-serif:  'IBM Plex Serif', Georgia, 'Times New Roman', serif;

  /* ── Radii ─────────────────────────────────────────────── */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;

  /* ── Shadows ───────────────────────────────────────────── */
  --shadow-card:     0 2px 12px rgba(0, 0, 0, 0.3);
  --shadow-elevated: 0 8px 32px rgba(0, 0, 0, 0.5);
  --shadow-primary:  0 4px 24px rgba(168, 90, 62, 0.3);
  --shadow-primary-hover: 0 8px 32px rgba(168, 90, 62, 0.4);

  /* ── Spacing (4-step base) ─────────────────────────────── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  /* ── Type scale ─────────────────────────────────────────── */
  --fs-xs:   11px;
  --fs-sm:   12px;
  --fs-base: 14px;
  --fs-md:   16px;
  --fs-lg:   20px;
  --fs-xl:   28px;
  --fs-2xl:  1.6rem;
  --fs-3xl:  2.2rem;
  --fs-hero: clamp(2.4rem, 4vw, 3.5rem);
}

/* ── Utility classes shared across components ──────────────── */
.meta-label {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-muted);
}