fix(theme): rozdziel role akcentu i dodaj ramke, ktora cokolwiek oddziela

Pomiar WCAG na realnych parach z apki (2026-08-13):

    accent #B23A48 jako tekst:  3,21 na bg | 2,96 na bgElevated | 2,75 na card
    border #3A3128 jako granica: 1,48 na bg | 1,27 na card

Czyli kolor MARKI byl ponizej nawet progu 3:1 dla elementow interfejsu,
a nie tylko ponizej 4,5 dla tekstu. Dotyczylo to aktywnych zakladek,
gwiazdek ulubionych, linkow i chipow. Ramki przy 1,27 nie byly granica,
tylko cieniem.

NIE zmieniam koloru marki. Podniesienie samego `accent` do progu tekstu
wymagaloby zejscia w roz (#CE6975), co likwiduje tozsamosc, ktorej broni
naglowek theme.ts. Zamiast tego rozdzielam ROLE tego samego koloru:

  accent      zostaje do WYPELNIEN — jasny tekst na nim ma 5,03, przechodzi
  accentText  #C75260 dla tekstu i obwodek — 4,30 / 3,96 / 3,68

62 podmiany w 24 plikach (34 color, 26 borderColor, 2 thumbColor).
38 wypelnien nietknietych. Sprawdzone skryptem, ze zaden zmieniony tekst
nie stoi na tle akcentu.

borderStrong #7B7065 dla granic NIOSACYCH ZNACZENIE (pola tekstowe, 12
miejsc); dekoracyjne wloski zostaja na `border`. Wartosc dobrana pod obie
powierzchnie, bo pola leza i na bg, i na card: #6B6157 dawal na karcie
2,66, a #73695E dokladnie 2,999, czyli wciaz ponizej progu.

mobile/src/changelog.ts

@@ -16,6 +16,13 @@ export type ChangelogEntry = {
 };
 
 export const CHANGELOG: ChangelogEntry[] = [
+  {
+    id: '2026-08-13d',
+    date: 'August 2026',
+    items: [
+      'Readability pass: links, active tabs and the favourite star are a shade lighter, so they stand out against cards instead of sinking into them. Search and input fields now have a visible outline.',
+    ],
+  },
   {
     id: '2026-08-13c',
     date: 'August 2026',

mobile/src/components/BugReportFAB.tsx

@@ -289,7 +289,7 @@ export function BugReportFAB({ client, appVersion, navRef }: Props) {
                       <Switch
                         value={includeScreenshot}
                         onValueChange={setIncludeScreenshot}
-                        thumbColor={includeScreenshot ? theme.accent : theme.muted}
+                        thumbColor={includeScreenshot ? theme.accentText : theme.muted}
                         trackColor={{ true: theme.accentDeep, false: theme.border }}
                       />
                     </View>
@@ -441,7 +441,7 @@ const styles = StyleSheet.create({
   },
   input: {
     backgroundColor: theme.card,
-    borderColor: theme.border,
+    borderColor: theme.borderStrong,
     borderWidth: 1,
     borderRadius: 8,
     color: theme.fg,
@@ -502,7 +502,7 @@ const styles = StyleSheet.create({
     borderColor: theme.border,
     borderWidth: 1,
   },
-  tabActive: { borderColor: theme.accent, backgroundColor: theme.bg },
+  tabActive: { borderColor: theme.accentText, backgroundColor: theme.bg },
   tabText: { color: theme.muted, fontWeight: '600', fontSize: 14 },
   tabTextActive: { color: theme.fg },
   tabDot: { width: 8, height: 8, borderRadius: 4, backgroundColor: theme.accent },
@@ -524,7 +524,7 @@ const styles = StyleSheet.create({
     paddingVertical: 4,
   },
   replyLabel: {
-    color: theme.accent,
+    color: theme.accentText,
     fontSize: 11,
     fontWeight: '800',
     textTransform: 'uppercase',

mobile/src/components/MigrationBanner.tsx

@@ -153,12 +153,12 @@ const styles = StyleSheet.create({
     paddingHorizontal: 12,
     borderRadius: 12,
     borderWidth: 1,
-    borderColor: theme.accent,
+    borderColor: theme.accentText,
     backgroundColor: theme.bgElevated,
   },
   barTitle: { color: theme.fg, fontSize: 14, fontWeight: '700' },
   barHint: { color: theme.muted, fontSize: 12, marginTop: 2, lineHeight: 16 },
-  barChevron: { color: theme.accent, fontSize: 22, fontWeight: '700' },
+  barChevron: { color: theme.accentText, fontSize: 22, fontWeight: '700' },
 
   backdrop: {
     flex: 1,
@@ -180,7 +180,7 @@ const styles = StyleSheet.create({
   scroll: { flexGrow: 0 },
   lead: { color: theme.fg, fontSize: 14, lineHeight: 20, marginBottom: 16 },
   step: {
-    color: theme.accent,
+    color: theme.accentText,
     fontSize: 12,
     fontWeight: '800',
     textTransform: 'uppercase',
@@ -200,13 +200,13 @@ const styles = StyleSheet.create({
     paddingHorizontal: 12,
   },
   code: { color: theme.fg, fontSize: 13, flex: 1 },
-  copyBtn: { color: theme.accent, fontSize: 13, fontWeight: '800' },
+  copyBtn: { color: theme.accentText, fontSize: 13, fontWeight: '800' },
   note: { color: theme.muted, fontSize: 13, lineHeight: 19, marginTop: 8 },
   dlBtn: {
     backgroundColor: theme.card,
     borderRadius: 10,
     borderWidth: 1,
-    borderColor: theme.accent,
+    borderColor: theme.accentText,
     paddingVertical: 12,
     alignItems: 'center',
   },

mobile/src/components/MovieFiltersSheet.tsx

@@ -350,7 +350,7 @@ export function MovieFiltersSheet({ visible, value, onChange, onClose }: Props)
               <Switch
                 value={draft.has_playback}
                 onValueChange={(v) => setDraft({ ...draft, has_playback: v })}
-                thumbColor={draft.has_playback ? theme.accent : theme.muted}
+                thumbColor={draft.has_playback ? theme.accentText : theme.muted}
                 trackColor={{ true: theme.accentDeep, false: theme.border }}
               />
             </View>
@@ -411,7 +411,7 @@ const styles = StyleSheet.create({
     marginBottom: 12,
   },
   title: { color: theme.fg, fontSize: 18, fontWeight: '600' },
-  reset: { color: theme.accent, fontSize: 14 },
+  reset: { color: theme.accentText, fontSize: 14 },
   label: {
     color: theme.muted,
     fontSize: 12,
@@ -433,7 +433,7 @@ const styles = StyleSheet.create({
   },
   chipActive: {
     backgroundColor: theme.accentDeep,
-    borderColor: theme.accent,
+    borderColor: theme.accentText,
   },
   chipText: { color: theme.muted, fontSize: 12 },
   chipTextActive: { color: theme.fg, fontWeight: '600' },
@@ -446,7 +446,7 @@ const styles = StyleSheet.create({
   dash: { color: theme.muted, fontSize: 16 },
   input: {
     backgroundColor: theme.card,
-    borderColor: theme.border,
+    borderColor: theme.borderStrong,
     borderWidth: 1,
     borderRadius: 8,
     color: theme.fg,

mobile/src/components/OnboardingModal.tsx

@@ -234,7 +234,7 @@ const styles = StyleSheet.create({
     justifyContent: 'space-between',
     marginBottom: 6,
   },
-  brand: { color: theme.accent, fontWeight: '900', letterSpacing: 2, fontSize: 13 },
+  brand: { color: theme.accentText, fontWeight: '900', letterSpacing: 2, fontSize: 13 },
   skip: { color: theme.muted, fontSize: 14, fontWeight: '600', minWidth: 36, textAlign: 'right' },
 
   pager: { flexGrow: 0 },
@@ -243,7 +243,7 @@ const styles = StyleSheet.create({
   title: { color: theme.fg, fontSize: 22, fontWeight: '800', marginBottom: 16 },
   lines: { gap: 12 },
   lineRow: { flexDirection: 'row', gap: 10 },
-  bullet: { color: theme.accent, fontSize: 16, lineHeight: 22 },
+  bullet: { color: theme.accentText, fontSize: 16, lineHeight: 22 },
   lineText: { color: theme.fg, fontSize: 15, lineHeight: 22, flex: 1 },
 
   dots: { flexDirection: 'row', justifyContent: 'center', gap: 6, marginVertical: 16 },

mobile/src/components/SceneTile.tsx

@@ -186,7 +186,7 @@ const styles = StyleSheet.create({
   },
   thumb: { width: '100%', height: '100%' },
   thumbDim: { opacity: 0.45 },
-  thumbSelectable: { borderWidth: 2, borderColor: theme.accent, opacity: 0.85 },
+  thumbSelectable: { borderWidth: 2, borderColor: theme.accentText, opacity: 0.85 },
   thumbPending: { borderWidth: 2, borderColor: theme.fg, opacity: 0.55 },
   dupBadge: {
     position: 'absolute',
@@ -207,7 +207,7 @@ const styles = StyleSheet.create({
     paddingVertical: 1,
     borderRadius: 6,
   },
-  favBadgeText: { color: theme.accent, fontSize: 11, fontWeight: '700' },
+  favBadgeText: { color: theme.accentText, fontSize: 11, fontWeight: '700' },
   newBadge: {
     position: 'absolute',
     top: 6,

mobile/src/components/WhatsNewModal.tsx

@@ -103,7 +103,7 @@ const styles = StyleSheet.create({
   scroll: { flexGrow: 0 },
   entry: { marginBottom: 14 },
   entryDate: {
-    color: theme.accent,
+    color: theme.accentText,
     fontSize: 12,
     fontWeight: '800',
     textTransform: 'uppercase',
@@ -111,7 +111,7 @@ const styles = StyleSheet.create({
     marginBottom: 8,
   },
   itemRow: { flexDirection: 'row', gap: 8, marginBottom: 8 },
-  bullet: { color: theme.accent, fontSize: 15, lineHeight: 21 },
+  bullet: { color: theme.accentText, fontSize: 15, lineHeight: 21 },
   itemText: { color: theme.fg, fontSize: 15, lineHeight: 21, flex: 1 },
   btn: {
     marginTop: 8,

mobile/src/navigation.tsx

@@ -202,7 +202,7 @@ export function AppNavigator({ onLogout, client, appVersion }: AppNavigatorProps
             headerRight: () => (
               <View style={{ flexDirection: 'row', gap: 14, alignItems: 'center' }}>
                 <Pressable onPress={() => navigation.navigate('Donate')} hitSlop={12}>
-                  <Text style={{ color: theme.accent, fontSize: 18 }}>♥</Text>
+                  <Text style={{ color: theme.accentText, fontSize: 18 }}>♥</Text>
                 </Pressable>
                 <Pressable
                   onPress={() => navigation.navigate('AppLockSettings')}

mobile/src/screens/AgeGateScreen.tsx

@@ -240,7 +240,7 @@ const styles = StyleSheet.create({
     marginTop: 1,
   },
   checkboxOn: {
-    borderColor: theme.accent,
+    borderColor: theme.accentText,
     backgroundColor: theme.accent,
   },
   checkboxMark: {

mobile/src/screens/AppLockScreen.tsx

@@ -188,7 +188,7 @@ const styles = StyleSheet.create({
     borderWidth: 1.5,
     borderColor: theme.border,
   },
-  dotFilled: { backgroundColor: theme.accent, borderColor: theme.accent },
+  dotFilled: { backgroundColor: theme.accent, borderColor: theme.accentText },
   dotError: { borderColor: theme.bad, backgroundColor: theme.bad },
   pad: {
     marginTop: 20,

mobile/src/screens/AppLockSettingsScreen.tsx

@@ -509,7 +509,7 @@ const styles = StyleSheet.create({
     borderColor: theme.border,
     alignItems: 'center',
   },
-  actionText: { color: theme.accent, fontSize: 14, fontWeight: '600' },
+  actionText: { color: theme.accentText, fontSize: 14, fontWeight: '600' },
   chipRow: { flexDirection: 'row', flexWrap: 'wrap', gap: 8, marginTop: 10 },
   chip: {
     paddingVertical: 8,
@@ -519,12 +519,12 @@ const styles = StyleSheet.create({
     borderWidth: 1,
     borderColor: theme.border,
   },
-  chipActive: { backgroundColor: theme.accent, borderColor: theme.accent },
+  chipActive: { backgroundColor: theme.accent, borderColor: theme.accentText },
   versionValue: { color: theme.fg, fontSize: 15, fontWeight: '700', fontVariant: ['tabular-nums'] },
-  linkValue: { color: theme.accent, fontSize: 15, fontWeight: '700' },
+  linkValue: { color: theme.accentText, fontSize: 15, fontWeight: '700' },
   codeInput: {
     backgroundColor: theme.card,
-    borderColor: theme.border,
+    borderColor: theme.borderStrong,
     borderWidth: 1,
     borderRadius: 8,
     color: theme.fg,

mobile/src/screens/BlacklistScreen.tsx

@@ -183,7 +183,7 @@ const styles = StyleSheet.create({
   },
   search: {
     backgroundColor: theme.card,
-    borderColor: theme.border,
+    borderColor: theme.borderStrong,
     borderWidth: 1,
     borderRadius: 8,
     color: theme.fg,
@@ -193,14 +193,14 @@ const styles = StyleSheet.create({
   chips: { flexDirection: 'row', flexWrap: 'wrap', gap: 6, padding: 16 },
   chip: {
     backgroundColor: theme.card,
-    borderColor: theme.accent,
+    borderColor: theme.accentText,
     borderWidth: 1,
     borderRadius: 14,
     paddingHorizontal: 10,
     paddingVertical: 5,
   },
   chipDisabled: { borderColor: theme.border, opacity: 0.6 },
-  chipText: { color: theme.accent, fontSize: 13 },
+  chipText: { color: theme.accentText, fontSize: 13 },
   chipTextDisabled: { color: theme.muted },
   row: {
     flexDirection: 'row',
@@ -217,6 +217,6 @@ const styles = StyleSheet.create({
     paddingHorizontal: 12,
     paddingVertical: 6,
   },
-  removeText: { color: theme.accent, fontSize: 13, fontWeight: '600' },
+  removeText: { color: theme.accentText, fontSize: 13, fontWeight: '600' },
   empty: { color: theme.muted, fontSize: 13, paddingHorizontal: 16 },
 });

mobile/src/screens/DonateScreen.tsx

@@ -248,7 +248,7 @@ const styles = StyleSheet.create({
     gap: 10,
   },
   footerLink: {
-    color: theme.accent,
+    color: theme.accentText,
     fontSize: 13,
     fontWeight: '600',
   },

mobile/src/screens/FavoritesScreen.tsx

@@ -565,7 +565,7 @@ const styles = StyleSheet.create({
     borderColor: theme.border,
     borderWidth: 1,
   },
-  tabBtnActive: { borderColor: theme.accent, backgroundColor: theme.bgElevated },
+  tabBtnActive: { borderColor: theme.accentText, backgroundColor: theme.bgElevated },
   tabBtnText: { color: theme.muted, fontWeight: '600', fontSize: 14 },
   tabBtnTextActive: { color: theme.fg },
   tabBadge: {

mobile/src/screens/LoginScreen.tsx

@@ -201,7 +201,7 @@ const styles = StyleSheet.create({
   },
   input: {
     backgroundColor: theme.bgElevated,
-    borderColor: theme.border,
+    borderColor: theme.borderStrong,
     borderWidth: 1.5,
     borderRadius: 12,
     color: theme.fg,

mobile/src/screens/MovieDetailScreen.tsx

@@ -391,8 +391,8 @@ const styles = StyleSheet.create({
   heroMeta: { flex: 1, gap: 4 },
   title: { color: theme.fg, fontSize: 18, fontWeight: '700' },
   subtitle: { color: theme.muted, fontSize: 13 },
-  studioLink: { color: theme.accent, fontWeight: '600' },
+  studioLink: { color: theme.accentText, fontWeight: '600' },
-  rating: { color: theme.accent, fontSize: 14, fontWeight: '700', marginTop: 4 },
+  rating: { color: theme.accentText, fontSize: 14, fontWeight: '700', marginTop: 4 },
 
   section: { paddingHorizontal: 14, paddingVertical: 10 },
   sectionTitle: { color: theme.fg, fontSize: 14, fontWeight: '700', marginBottom: 8 },

mobile/src/screens/MoviesScreen.tsx

@@ -188,12 +188,12 @@ const styles = StyleSheet.create({
   },
   filterBtnActive: {
     backgroundColor: theme.accentDeep,
-    borderColor: theme.accent,
+    borderColor: theme.accentText,
   },
   filterBtnText: { color: theme.fg, fontSize: 13, fontWeight: '600' },
   search: {
     backgroundColor: theme.card,
-    borderColor: theme.border,
+    borderColor: theme.borderStrong,
     borderWidth: 1,
     borderRadius: 10,
     color: theme.fg,

mobile/src/screens/PerformerScenesScreen.tsx

@@ -422,7 +422,7 @@ const styles = StyleSheet.create({
     alignItems: 'center',
   },
   actionBtnText: { color: theme.muted, fontWeight: '600', fontSize: 12 },
-  actionBtnTextPrimary: { color: theme.accent, fontWeight: '700', fontSize: 12 },
+  actionBtnTextPrimary: { color: theme.accentText, fontWeight: '700', fontSize: 12 },
   tagRow: {
     flexDirection: 'row',
     gap: 6,
@@ -439,7 +439,7 @@ const styles = StyleSheet.create({
     paddingHorizontal: 10,
     maxWidth: 200,
   },
-  tagChipActive: { backgroundColor: theme.accent, borderColor: theme.accent },
+  tagChipActive: { backgroundColor: theme.accent, borderColor: theme.accentText },
   tagChipText: { color: theme.muted, fontSize: 12, fontWeight: '600' },
   tagChipTextActive: { color: theme.fg, fontWeight: '700' },
   tabRow: { flexDirection: 'row', gap: 8, marginBottom: 8 },
@@ -455,7 +455,7 @@ const styles = StyleSheet.create({
     borderColor: theme.border,
     borderWidth: 1,
   },
-  tabBtnActive: { borderColor: theme.accent, backgroundColor: theme.bgElevated },
+  tabBtnActive: { borderColor: theme.accentText, backgroundColor: theme.bgElevated },
   tabBtnText: { color: theme.muted, fontWeight: '600', fontSize: 14 },
   tabBtnTextActive: { color: theme.fg },
   tabCount: {

mobile/src/screens/PerformersScreen.tsx

@@ -191,7 +191,7 @@ const styles = StyleSheet.create({
   search: {
     flex: 1,
     backgroundColor: theme.card,
-    borderColor: theme.border,
+    borderColor: theme.borderStrong,
     borderWidth: 1.5,
     borderRadius: 12,
     color: theme.fg,

mobile/src/screens/PinEntry.tsx

@@ -85,7 +85,7 @@ const styles = StyleSheet.create({
     borderWidth: 1.5,
     borderColor: theme.border,
   },
-  dotFilled: { backgroundColor: theme.accent, borderColor: theme.accent },
+  dotFilled: { backgroundColor: theme.accent, borderColor: theme.accentText },
   pad: {
     marginTop: 24,
     flexDirection: 'row',

mobile/src/screens/PlayerScreen.tsx

@@ -2065,7 +2065,7 @@ const styles = StyleSheet.create({
     overflow: 'hidden',
   },
   panSeekDelta: {
-    color: theme.accent,
+    color: theme.accentText,
     fontSize: 14,
     fontWeight: '700',
     marginTop: 6,

mobile/src/screens/SceneDetailScreen.tsx

@@ -990,7 +990,7 @@ const styles = StyleSheet.create({
   pillRow: { flexDirection: 'row', flexWrap: 'wrap', gap: 8 },
 
   pillPrimary: {
-    borderColor: theme.accent,
+    borderColor: theme.accentText,
     borderWidth: 1,
     backgroundColor: `${theme.accent}1A`,
     borderRadius: 16,
@@ -1048,14 +1048,14 @@ const styles = StyleSheet.create({
   refreshThumbText: { color: theme.muted, fontSize: 13, fontWeight: '600' },
 
   pillSource: {
-    borderColor: theme.accent,
+    borderColor: theme.accentText,
     borderWidth: 1,
     borderRadius: 14,
     paddingHorizontal: 10,
     paddingVertical: 4,
   },
   pillSourceText: {
-    color: theme.accent,
+    color: theme.accentText,
     fontSize: 11,
     fontWeight: '700',
     textTransform: 'uppercase',
@@ -1067,7 +1067,7 @@ const styles = StyleSheet.create({
 
   watchButton: {
     backgroundColor: theme.bgElevated,
-    borderColor: theme.accent,
+    borderColor: theme.accentText,
     borderWidth: 1.5,
     borderRadius: 12,
     padding: 14,

mobile/src/screens/ScenesFilterModal.tsx

@@ -395,7 +395,7 @@ const styles = StyleSheet.create({
   },
   headerCancel: { color: theme.muted, fontSize: 15 },
   headerTitle: { color: theme.fg, fontSize: 16, fontWeight: '600' },
-  headerApply: { color: theme.accent, fontSize: 15, fontWeight: '600' },
+  headerApply: { color: theme.accentText, fontSize: 15, fontWeight: '600' },
   section: {
     paddingHorizontal: 16,
     paddingVertical: 14,
@@ -418,9 +418,9 @@ const styles = StyleSheet.create({
     paddingHorizontal: 12,
     paddingVertical: 6,
   },
-  sortPillActive: { borderColor: theme.accent, backgroundColor: theme.bg },
+  sortPillActive: { borderColor: theme.accentText, backgroundColor: theme.bg },
   sortPillText: { color: theme.fg, fontSize: 13 },
-  sortPillTextActive: { color: theme.accent, fontWeight: '600' },
+  sortPillTextActive: { color: theme.accentText, fontWeight: '600' },
   switchRow: {
     flexDirection: 'row',
     alignItems: 'center',
@@ -429,7 +429,7 @@ const styles = StyleSheet.create({
   switchLabel: { color: theme.fg, fontSize: 14, flex: 1 },
   search: {
     backgroundColor: theme.card,
-    borderColor: theme.border,
+    borderColor: theme.borderStrong,
     borderWidth: 1,
     borderRadius: 8,
     color: theme.fg,
@@ -445,9 +445,9 @@ const styles = StyleSheet.create({
     paddingHorizontal: 10,
     paddingVertical: 5,
   },
-  chipActive: { borderColor: theme.accent, backgroundColor: theme.bg },
+  chipActive: { borderColor: theme.accentText, backgroundColor: theme.bg },
   chipText: { color: theme.fg, fontSize: 13 },
-  chipTextActive: { color: theme.accent, fontWeight: '600' },
+  chipTextActive: { color: theme.accentText, fontWeight: '600' },
   chipCount: { color: theme.muted, fontSize: 11 },
   resetRow: { padding: 16 },
   resetButton: {

mobile/src/screens/ScenesScreen.tsx

@@ -157,7 +157,7 @@ export function ScenesScreen() {
             style={[styles.toolbarButton, alreadySaved && styles.toolbarButtonActive]}
           >
             <Text
-              style={[styles.toolbarButtonText, alreadySaved && { color: theme.accent }]}
+              style={[styles.toolbarButtonText, alreadySaved && { color: theme.accentText }]}
             >
               {alreadySaved ? '★ Saved' : '☆ Save'}
             </Text>
@@ -167,7 +167,7 @@ export function ScenesScreen() {
           onPress={() => setFilterOpen(true)}
           style={[styles.toolbarButton, activeCount > 0 && styles.toolbarButtonActive]}
         >
-          <Text style={[styles.toolbarButtonText, activeCount > 0 && { color: theme.accent }]}>
+          <Text style={[styles.toolbarButtonText, activeCount > 0 && { color: theme.accentText }]}>
             Filter{activeCount > 0 ? ` ${activeCount}` : ''}
           </Text>
         </Pressable>
@@ -417,7 +417,7 @@ const styles = StyleSheet.create({
   search: {
     flex: 1,
     backgroundColor: theme.card,
-    borderColor: theme.border,
+    borderColor: theme.borderStrong,
     borderWidth: 1.5,
     borderRadius: 12,
     color: theme.fg,
@@ -432,7 +432,7 @@ const styles = StyleSheet.create({
     paddingHorizontal: 16,
     justifyContent: 'center',
   },
-  toolbarButtonActive: { borderColor: theme.accent, backgroundColor: `${theme.accent}1A` },
+  toolbarButtonActive: { borderColor: theme.accentText, backgroundColor: `${theme.accent}1A` },
   toolbarButtonText: { color: theme.fg, fontWeight: '700' },
   savedRow: { flexGrow: 0, marginBottom: 12 },
   savedRowContent: { gap: 8, paddingRight: 12 },
@@ -445,9 +445,9 @@ const styles = StyleSheet.create({
     paddingVertical: 6,
     maxWidth: 200,
   },
-  savedChipActive: { borderColor: theme.accent, backgroundColor: `${theme.accent}1A` },
+  savedChipActive: { borderColor: theme.accentText, backgroundColor: `${theme.accent}1A` },
   savedChipText: { color: theme.fg, fontSize: 13 },
-  savedChipTextActive: { color: theme.accent, fontWeight: '600' },
+  savedChipTextActive: { color: theme.accentText, fontWeight: '600' },
   subToolbar: { flexDirection: 'row', gap: 8, marginBottom: 16 },
   subButton: {
     backgroundColor: theme.card,
@@ -459,7 +459,7 @@ const styles = StyleSheet.create({
   },
   subButtonActive: {
     backgroundColor: theme.accent,
-    borderColor: theme.accent,
+    borderColor: theme.accentText,
     shadowColor: theme.accent,
     shadowOffset: { width: 0, height: 0 },
     shadowOpacity: 0.5,
@@ -494,7 +494,7 @@ const styles = StyleSheet.create({
     paddingVertical: 1,
     borderRadius: 8,
   },
-  favBadgeText: { color: theme.accent, fontSize: 12, fontWeight: '700' },
+  favBadgeText: { color: theme.accentText, fontSize: 12, fontWeight: '700' },
   thumbnail: {
     width: 100,
     height: 56,
@@ -506,7 +506,7 @@ const styles = StyleSheet.create({
   },
   rowTitle: { color: theme.fg, fontWeight: '700', fontSize: 16, marginBottom: 4 },
   rowMuted: { color: theme.muted, fontSize: 14, marginTop: 2 },
-  rowSources: { color: theme.accent, fontSize: 12, marginTop: 8, textTransform: 'uppercase', fontWeight: '600' },
+  rowSources: { color: theme.accentText, fontSize: 12, marginTop: 8, textTransform: 'uppercase', fontWeight: '600' },
   muted: { color: theme.muted, textAlign: 'center', marginTop: 32, fontSize: 16 },
   error: { color: theme.bad, padding: 16 },
 
@@ -519,7 +519,7 @@ const styles = StyleSheet.create({
     backgroundColor: theme.card,
   },
   chipActive: {
-    borderColor: theme.accent,
+    borderColor: theme.accentText,
     backgroundColor: `${theme.accent}26`,
     shadowColor: theme.accent,
     shadowOffset: { width: 0, height: 0 },
@@ -528,7 +528,7 @@ const styles = StyleSheet.create({
     elevation: 2,
   },
   chipText: { color: theme.muted, fontSize: 13, fontWeight: '700' },
-  chipTextActive: { color: theme.accent },
+  chipTextActive: { color: theme.accentText },
 
   // Continue watching rail
   rail: { marginBottom: 16 },

mobile/src/screens/SiteScenesScreen.tsx

@@ -348,12 +348,12 @@ const styles = StyleSheet.create({
     paddingVertical: 1,
     borderRadius: 8,
   },
-  favBadgeText: { color: theme.accent, fontSize: 12, fontWeight: '700' },
+  favBadgeText: { color: theme.accentText, fontSize: 12, fontWeight: '700' },
   rowContent: { flex: 1 },
   rowTitle: { color: theme.fg, fontWeight: '700', fontSize: 16, marginBottom: 4 },
   rowMuted: { color: theme.muted, fontSize: 14, marginTop: 2 },
   rowSources: {
-    color: theme.accent,
+    color: theme.accentText,
     fontSize: 12,
     marginTop: 8,
     textTransform: 'uppercase',
@@ -371,7 +371,7 @@ const styles = StyleSheet.create({
     borderColor: theme.border,
     borderWidth: 1,
   },
-  filterBtnActive: { backgroundColor: theme.accentDeep, borderColor: theme.accent },
+  filterBtnActive: { backgroundColor: theme.accentDeep, borderColor: theme.accentText },
   filterBtnText: { color: theme.fg, fontSize: 13, fontWeight: '600' },
   clearBtn: { paddingHorizontal: 10, paddingVertical: 8 },
   clearBtnText: { color: theme.muted, fontSize: 13 },
@@ -391,7 +391,7 @@ const modalStyles = StyleSheet.create({
   close: { color: theme.muted, fontSize: 20, padding: 4 },
   search: {
     backgroundColor: theme.card,
-    borderColor: theme.border,
+    borderColor: theme.borderStrong,
     borderWidth: 1,
     borderRadius: 10,
     color: theme.fg,
@@ -410,7 +410,7 @@ const modalStyles = StyleSheet.create({
     borderColor: theme.border,
     borderWidth: 1,
   },
-  chipOn: { backgroundColor: theme.accentDeep, borderColor: theme.accent },
+  chipOn: { backgroundColor: theme.accentDeep, borderColor: theme.accentText },
   chipText: { color: theme.fg, fontSize: 13 },
   chipTextOn: { color: theme.fg, fontWeight: '700' },
   muted: { color: theme.muted, fontSize: 13, paddingVertical: 8 },

mobile/src/screens/SitesScreen.tsx

@@ -325,7 +325,7 @@ const styles = StyleSheet.create({
   search: {
     flex: 1,
     backgroundColor: theme.card,
-    borderColor: theme.border,
+    borderColor: theme.borderStrong,
     borderWidth: 1.5,
     borderRadius: 12,
     color: theme.fg,

mobile/src/screens/StudioScenesScreen.tsx

@@ -292,9 +292,9 @@ const styles = StyleSheet.create({
     borderWidth: 1,
     borderColor: theme.border,
   },
-  tabBtnActive: { borderColor: theme.accent },
+  tabBtnActive: { borderColor: theme.accentText },
   tabBtnText: { color: theme.muted, fontSize: 13 },
-  tabBtnTextActive: { color: theme.accent, fontWeight: '700' },
+  tabBtnTextActive: { color: theme.accentText, fontWeight: '700' },
   tabCount: {
     backgroundColor: theme.border,
     borderRadius: 999,

mobile/src/screens/TagScenesScreen.tsx

@@ -119,7 +119,7 @@ const styles = StyleSheet.create({
   },
   rowTitle: { color: theme.fg, fontWeight: '600', marginBottom: 2 },
   rowMuted: { color: theme.muted, fontSize: 13, marginTop: 2 },
-  rowSources: { color: theme.accent, fontSize: 11, marginTop: 4, textTransform: 'uppercase' },
+  rowSources: { color: theme.accentText, fontSize: 11, marginTop: 4, textTransform: 'uppercase' },
   muted: { color: theme.muted, textAlign: 'center', marginTop: 24 },
   error: { color: theme.bad, padding: 12 },
 });

mobile/src/screens/TagsScreen.tsx

@@ -161,7 +161,7 @@ const styles = StyleSheet.create({
   search: {
     flex: 1,
     backgroundColor: theme.card,
-    borderColor: theme.border,
+    borderColor: theme.borderStrong,
     borderWidth: 1.5,
     borderRadius: 12,
     color: theme.fg,

mobile/src/theme.ts

@@ -19,6 +19,13 @@ export const theme = {
   bgElevated:  '#1E1A14',
   card:        '#26201A',
   border:      '#3A3128',
+  // Granica, która faktycznie oddziela. `border` ma 1,48:1 na `bg` i **1,27:1 na `card`**,
+  // czyli przy wymogu 3:1 nie jest granicą, tylko cieniem — zostaje do dekoracyjnych
+  // włosków. Wszystko, co niesie znaczenie (pola, fokus, podział sekcji), bierze to.
+  //
+  // Wartość dobrana pod OBIE powierzchnie: pola tekstowe leżą i na `bg` (ekrany), i na
+  // `card` (arkusze filtrów), a #6B6157 dawał na karcie 2,66, zaś #73695E dokładnie 2,999, czyli wciąż poniżej.
+  borderStrong: '#7B7065',  // 3,89 na bg · 3,33 na card (obie powierzchnie ≥3:1)
   borderFocus: '#B23A48',
 
   // Foreground, warm off-white (nie pure white żeby nie biło na warm dark).
@@ -29,6 +36,15 @@ export const theme = {
   // Accent, oxblood/rust. Distinctive, niekonwencjonalne dla "media app".
   // Brak glow/neon. Deep wariant dla pressed states.
   accent:          '#B23A48',
+  // WYPEŁNIENIE ma zostać oxbloodem: jasny tekst na nim daje 5,03:1, czyli przechodzi.
+  // Ale TEN SAM kolor jako tekst albo cienka obwódka jest nieczytelny — pomiar WCAG
+  // 2026-08-13: 3,21 na `bg`, 2,96 na `bgElevated`, **2,75 na `card`**, czyli poniżej
+  // nawet progu 3:1 dla elementów interfejsu, nie mówiąc o 4,5 dla tekstu.
+  //
+  // Podniesienie samego `accent` do progu tekstu wymagałoby zejścia w róż (#CE6975),
+  // co likwiduje tożsamość, której broni nagłówek tego pliku. Zamiast tego rozdzielamy
+  // ROLE: `accent` wypełnia, `accentText` pisze i obrysowuje.
+  accentText:      '#C75260',  // 4,30 na bg · 3,96 na bgElevated · 3,68 na card
   accentGlow:      '#B23A48',  // alias, back-compat, ale bez prawdziwego glow
   accentDeep:      '#7A1F2A',
   accentSecondary: '#D89B4A',  // muted amber dla secondary CTAs