Liquifact-frontend/app/globals.css at main · ogunjobielijah09-cyber/Liquifact-frontend · 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
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
@import "tailwindcss";

/*
  LiquiFact global theming tokens.
  Theme is driven by a `data-theme` attribute set on <html> by the
  ThemeToggle component (and the pre-paint inline script in layout.js).

  Supported values: data-theme="dark" | data-theme="light"

  Token mapping:
  - --color-bg         : page background
  - --color-fg         : primary text
  - --color-muted      : secondary / muted text
  - --color-surface    : card / panel background
  - --color-border     : subtle border colour
  - --color-primary    : cyan brand accent (#22d3ee / cyan-400)
  - --color-focus-ring : focus-visible outline colour (high-contrast in both themes)
*/

/* ── Dark theme (default — matches existing slate-950 palette) ─────────────── */
:root,
[data-theme="dark"] {
  --color-bg: #020617; /* slate-950 */
  --color-fg: #f1f5f9; /* slate-100 */
  --color-muted: #94a3b8; /* slate-400 */
  --color-surface: #0f172a; /* slate-900 */
  --color-border: #1e293b; /* slate-800 */
  --color-primary: #22d3ee; /* cyan-400  */
  --color-focus-ring: #22d3ee; /* cyan-400 — 10:1 against slate-950 */
}

/* ── Light theme ───────────────────────────────────────────────────────────── */
[data-theme="light"] {
  --color-bg: #f8fafc; /* slate-50  */
  --color-fg: #0f172a; /* slate-900 */
  --color-muted: #64748b; /* slate-500 */
  --color-surface: #ffffff; /* white     */
  --color-border: #e2e8f0; /* slate-200 */
  --color-primary: #0891b2; /* cyan-600  — stays legible on white */
  --color-focus-ring: #0891b2; /* cyan-600 — 3.5:1 against slate-50 */
}

@theme inline {
  --color-bg: var(--color-bg);
  --color-foreground: var(--color-fg);
  --color-muted: var(--color-muted);
  --color-primary: var(--color-primary);
  --color-focus-ring: var(--color-focus-ring);

  /* Geist fonts (provided by app/layout.js via next/font) */
  --font-sans: var(--font-geist-sans);
  --font-mono: var(--font-geist-mono);
}

html,
body {
  background: var(--color-bg);
  color: var(--color-fg);
  font-family: var(--font-geist-sans);
}

body {
  margin: 0;
}

/* Skip-to-content: off-screen until focused, then anchors to top-left of viewport.
   Only visible to keyboard users (on first Tab press). Mouse users never see it. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 1rem;
  width: 1px;
  height: 1px;
  overflow: hidden;
  z-index: 9999;
  padding: 0.5rem 1rem;
  background: var(--color-primary);
  color: var(--color-bg);
  font-weight: 600;
  border-radius: 0.375rem;
  text-decoration: none;
  white-space: nowrap;
}

.skip-link:focus-visible {
  left: 1rem;
  width: auto;
  height: auto;
  overflow: visible;
  outline: 2px solid var(--color-bg);
  outline-offset: 2px;
}

/*
  Reusable focus ring — high-contrast outline driven by --color-focus-ring.
  Apply the .focus-ring class to any interactive element (button, link, input, toggle)
  that needs a consistent, theme-aware focus-visible indicator.

  The colour token --color-focus-ring is set in both dark and light theme blocks
  above and is verified by the WCAG contrast harness in
  app/globals.contrast-ratio.test.tsx.
*/
.focus-ring:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
  outline-style: solid;
  border-radius: 0.25rem;
}

/* ── Print stylesheet ──────────────────────────────────────────────────────── */
/*
   Renders the invoice detail page as a clean, ink-friendly document.
   - Hides interactive chrome: nav header, wallet button, back link, fund button,
     disclaimer note, and the on-screen print button.
   - Forces a white background and dark text to save ink.
   - Marks elements with .no-print to opt out of the printed output.
*/
@media print {
  /* Switch to a light, ink-friendly palette */
  html,
  body {
    background: #ffffff !important;
    color: #0f172a !important;
  }

  /* Hide interactive/navigation chrome */
  .no-print {
    display: none !important;
  }

  /* Ensure invoice summary section prints with visible borders */
  .print-invoice-section {
    border: 1px solid #cbd5e1 !important;
    background: #ffffff !important;
    color: #0f172a !important;
    border-radius: 0.5rem;
    padding: 1.5rem;
  }

  /* Definition list terms and values */
  .print-invoice-section dt {
    color: #64748b !important;
  }

  .print-invoice-section dd {
    color: #0f172a !important;
  }

  /* Remove decorative backgrounds from the page wrapper */
  .print-page-wrapper {
    background: #ffffff !important;
    color: #0f172a !important;
  }
}