feat(tv): add scalable typography with user-configurable text size

components/tv/settings/TVLogoutButton.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { useTranslation } from "react-i18next";
 import { Animated, Pressable, View } from "react-native";
 import { Text } from "@/components/common/Text";
-import { TVTypography } from "@/constants/TVTypography";
+import { useScaledTVTypography } from "@/constants/TVTypography";
 import { useTVFocusAnimation } from "../hooks/useTVFocusAnimation";
 
 export interface TVLogoutButtonProps {
@@ -15,6 +15,7 @@ export const TVLogoutButton: React.FC<TVLogoutButtonProps> = ({
   disabled,
 }) => {
   const { t } = useTranslation();
+  const typography = useScaledTVTypography();
   const { focused, handleFocus, handleBlur, animatedStyle } =
     useTVFocusAnimation({ scaleAmount: 1.05 });
 
@@ -49,7 +50,7 @@ export const TVLogoutButton: React.FC<TVLogoutButtonProps> = ({
         >
           <Text
             style={{
-              fontSize: TVTypography.body,
+              fontSize: typography.body,
               fontWeight: "bold",
               color: "#FFFFFF",
             }}

components/tv/settings/TVSectionHeader.tsx

@@ -1,24 +1,28 @@
 import React from "react";
 import { Text } from "@/components/common/Text";
-import { TVTypography } from "@/constants/TVTypography";
+import { useScaledTVTypography } from "@/constants/TVTypography";
 
 export interface TVSectionHeaderProps {
   title: string;
 }
 
-export const TVSectionHeader: React.FC<TVSectionHeaderProps> = ({ title }) => (
-  <Text
-    style={{
-      fontSize: TVTypography.callout,
-      fontWeight: "600",
-      color: "#9CA3AF",
-      textTransform: "uppercase",
-      letterSpacing: 1,
-      marginTop: 32,
-      marginBottom: 16,
-      marginLeft: 8,
-    }}
-  >
-    {title}
-  </Text>
-);
+export const TVSectionHeader: React.FC<TVSectionHeaderProps> = ({ title }) => {
+  const typography = useScaledTVTypography();
+
+  return (
+    <Text
+      style={{
+        fontSize: typography.callout,
+        fontWeight: "600",
+        color: "#9CA3AF",
+        textTransform: "uppercase",
+        letterSpacing: 1,
+        marginTop: 32,
+        marginBottom: 16,
+        marginLeft: 8,
+      }}
+    >
+      {title}
+    </Text>
+  );
+};

components/tv/settings/TVSettingsOptionButton.tsx

@@ -2,7 +2,7 @@ import { Ionicons } from "@expo/vector-icons";
 import React from "react";
 import { Animated, Pressable, View } from "react-native";
 import { Text } from "@/components/common/Text";
-import { TVTypography } from "@/constants/TVTypography";
+import { useScaledTVTypography } from "@/constants/TVTypography";
 import { useTVFocusAnimation } from "../hooks/useTVFocusAnimation";
 
 export interface TVSettingsOptionButtonProps {
@@ -20,6 +20,7 @@ export const TVSettingsOptionButton: React.FC<TVSettingsOptionButtonProps> = ({
   isFirst,
   disabled,
 }) => {
+  const typography = useScaledTVTypography();
   const { focused, handleFocus, handleBlur, animatedStyle } =
     useTVFocusAnimation({ scaleAmount: 1.02 });
 
@@ -49,13 +50,13 @@ export const TVSettingsOptionButton: React.FC<TVSettingsOptionButtonProps> = ({
           },
         ]}
       >
-        <Text style={{ fontSize: TVTypography.body, color: "#FFFFFF" }}>
+        <Text style={{ fontSize: typography.body, color: "#FFFFFF" }}>
           {label}
         </Text>
         <View style={{ flexDirection: "row", alignItems: "center" }}>
           <Text
             style={{
-              fontSize: TVTypography.callout,
+              fontSize: typography.callout,
               color: "#9CA3AF",
               marginRight: 12,
             }}

components/tv/settings/TVSettingsRow.tsx

@@ -2,7 +2,7 @@ import { Ionicons } from "@expo/vector-icons";
 import React from "react";
 import { Animated, Pressable, View } from "react-native";
 import { Text } from "@/components/common/Text";
-import { TVTypography } from "@/constants/TVTypography";
+import { useScaledTVTypography } from "@/constants/TVTypography";
 import { useTVFocusAnimation } from "../hooks/useTVFocusAnimation";
 
 export interface TVSettingsRowProps {
@@ -22,6 +22,7 @@ export const TVSettingsRow: React.FC<TVSettingsRowProps> = ({
   showChevron = true,
   disabled,
 }) => {
+  const typography = useScaledTVTypography();
   const { focused, handleFocus, handleBlur, animatedStyle } =
     useTVFocusAnimation({ scaleAmount: 1.02 });
 
@@ -51,13 +52,13 @@ export const TVSettingsRow: React.FC<TVSettingsRowProps> = ({
           },
         ]}
       >
-        <Text style={{ fontSize: TVTypography.body, color: "#FFFFFF" }}>
+        <Text style={{ fontSize: typography.body, color: "#FFFFFF" }}>
           {label}
         </Text>
         <View style={{ flexDirection: "row", alignItems: "center" }}>
           <Text
             style={{
-              fontSize: TVTypography.callout,
+              fontSize: typography.callout,
               color: "#9CA3AF",
               marginRight: showChevron ? 12 : 0,
             }}

components/tv/settings/TVSettingsStepper.tsx

@@ -2,7 +2,7 @@ import { Ionicons } from "@expo/vector-icons";
 import React from "react";
 import { Animated, Pressable, View } from "react-native";
 import { Text } from "@/components/common/Text";
-import { TVTypography } from "@/constants/TVTypography";
+import { useScaledTVTypography } from "@/constants/TVTypography";
 import { useTVFocusAnimation } from "../hooks/useTVFocusAnimation";
 
 export interface TVSettingsStepperProps {
@@ -24,6 +24,7 @@ export const TVSettingsStepper: React.FC<TVSettingsStepperProps> = ({
   isFirst,
   disabled,
 }) => {
+  const typography = useScaledTVTypography();
   const labelAnim = useTVFocusAnimation({ scaleAmount: 1.02 });
   const minusAnim = useTVFocusAnimation({ scaleAmount: 1.1 });
   const plusAnim = useTVFocusAnimation({ scaleAmount: 1.1 });
@@ -54,7 +55,7 @@ export const TVSettingsStepper: React.FC<TVSettingsStepperProps> = ({
         focusable={!disabled}
       >
         <Animated.View style={labelAnim.animatedStyle}>
-          <Text style={{ fontSize: TVTypography.body, color: "#FFFFFF" }}>
+          <Text style={{ fontSize: typography.body, color: "#FFFFFF" }}>
             {label}
           </Text>
         </Animated.View>
@@ -89,7 +90,7 @@ export const TVSettingsStepper: React.FC<TVSettingsStepperProps> = ({
         </Pressable>
         <Text
           style={{
-            fontSize: TVTypography.callout,
+            fontSize: typography.callout,
             color: "#FFFFFF",
             minWidth: 60,
             textAlign: "center",

components/tv/settings/TVSettingsTextInput.tsx

@@ -1,7 +1,7 @@
 import React, { useRef } from "react";
 import { Animated, Pressable, TextInput } from "react-native";
 import { Text } from "@/components/common/Text";
-import { TVTypography } from "@/constants/TVTypography";
+import { useScaledTVTypography } from "@/constants/TVTypography";
 import { useTVFocusAnimation } from "../hooks/useTVFocusAnimation";
 
 export interface TVSettingsTextInputProps {
@@ -23,6 +23,7 @@ export const TVSettingsTextInput: React.FC<TVSettingsTextInputProps> = ({
   secureTextEntry,
   disabled,
 }) => {
+  const typography = useScaledTVTypography();
   const inputRef = useRef<TextInput>(null);
   const { focused, handleFocus, handleBlur, animatedStyle } =
     useTVFocusAnimation({ scaleAmount: 1.02 });
@@ -56,7 +57,7 @@ export const TVSettingsTextInput: React.FC<TVSettingsTextInputProps> = ({
       >
         <Text
           style={{
-            fontSize: TVTypography.callout,
+            fontSize: typography.callout,
             color: "#9CA3AF",
             marginBottom: 8,
           }}
@@ -74,7 +75,7 @@ export const TVSettingsTextInput: React.FC<TVSettingsTextInputProps> = ({
           autoCapitalize='none'
           autoCorrect={false}
           style={{
-            fontSize: TVTypography.body,
+            fontSize: typography.body,
             color: "#FFFFFF",
             backgroundColor: "rgba(255, 255, 255, 0.05)",
             borderRadius: 8,

components/tv/settings/TVSettingsToggle.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { Animated, Pressable, View } from "react-native";
 import { Text } from "@/components/common/Text";
-import { TVTypography } from "@/constants/TVTypography";
+import { useScaledTVTypography } from "@/constants/TVTypography";
 import { useTVFocusAnimation } from "../hooks/useTVFocusAnimation";
 
 export interface TVSettingsToggleProps {
@@ -19,6 +19,7 @@ export const TVSettingsToggle: React.FC<TVSettingsToggleProps> = ({
   isFirst,
   disabled,
 }) => {
+  const typography = useScaledTVTypography();
   const { focused, handleFocus, handleBlur, animatedStyle } =
     useTVFocusAnimation({ scaleAmount: 1.02 });
 
@@ -48,7 +49,7 @@ export const TVSettingsToggle: React.FC<TVSettingsToggleProps> = ({
           },
         ]}
       >
-        <Text style={{ fontSize: TVTypography.body, color: "#FFFFFF" }}>
+        <Text style={{ fontSize: typography.body, color: "#FFFFFF" }}>
           {label}
         </Text>
         <View