import { StyleSheet } from 'react-native';

export function createStyles() {
  return StyleSheet.create({
    root: { flex: 1 },
    scroll: {
      flexGrow: 1,
      alignItems: 'center',
      justifyContent: 'center',
      padding: 24,
      paddingVertical: 48,
    },
    title: {
      fontSize: 44,
      fontWeight: '900',
      marginBottom: 20,
      letterSpacing: 1,
    },
    logo: {
      width: 100,
      height: 100,
      marginBottom: 20,
      borderRadius: 22,
    },
    topRow: {
      width: '100%',
      maxWidth: 640,
      alignItems: 'center',
      gap: 10,
      marginBottom: 20,
    },
    backMenuBtn: {
      paddingHorizontal: 18,
      paddingVertical: 10,
      borderRadius: 14,
      borderWidth: 1.5,
    },
    toggleRow: {
      flexDirection: 'row',
      flexWrap: 'wrap',
      gap: 10,
      justifyContent: 'center',
    },
    toggleBtn: {
      paddingHorizontal: 16,
      paddingVertical: 8,
      borderRadius: 20,
      borderWidth: 1.5,
    },
    toggleText: { fontSize: 14, fontWeight: '600' },
    modeSelectLabel: {
      fontSize: 12,
      letterSpacing: 2,
      textTransform: 'uppercase',
      marginBottom: 20,
    },
    modeCard: {
      width: '100%',
      maxWidth: 440,
      borderRadius: 22,
      padding: 28,
      borderWidth: 2,
      alignItems: 'center',
      marginBottom: 16,
      shadowColor: '#000',
      shadowOffset: { width: 0, height: 6 },
      shadowOpacity: 0.18,
      shadowRadius: 14,
      elevation: 7,
    },
    modeTitle: {
      fontSize: 26,
      fontWeight: '800',
      marginBottom: 8,
      letterSpacing: 0.5,
    },
    modeDesc: {
      fontSize: 14,
      textAlign: 'center',
      lineHeight: 22,
    },
    card: {
      width: '100%',
      maxWidth: 440,
      borderRadius: 22,
      padding: 28,
      borderWidth: 1.5,
      alignItems: 'center',
      shadowColor: '#000',
      shadowOffset: { width: 0, height: 6 },
      shadowOpacity: 0.2,
      shadowRadius: 16,
      elevation: 8,
    },
    inputLabel: {
      fontSize: 12,
      letterSpacing: 1,
      textTransform: 'uppercase',
      marginBottom: 10,
    },
    inputRow: {
      flexDirection: 'row',
      alignItems: 'center',
      gap: 10,
      marginBottom: 16,
    },
    timerInputGroup: { alignItems: 'center', gap: 4 },
    inputUnit: { fontSize: 11, fontWeight: '600', letterSpacing: 1.5 },
    timeInput: {
      width: 72,
      height: 58,
      borderRadius: 12,
      borderWidth: 2,
      textAlign: 'center',
      fontSize: 28,
      fontWeight: '800',
    },
    colon: { fontSize: 34, fontWeight: '900' },
    btnRow: {
      flexDirection: 'row',
      gap: 12,
      marginTop: 20,
      alignItems: 'center',
    },
    setBtn: {
      paddingHorizontal: 32,
      paddingVertical: 14,
      borderRadius: 14,
    },
    setBtnText: { color: '#fff', fontSize: 16, fontWeight: '700', letterSpacing: 0.5 },
    resetBtn: {
      paddingHorizontal: 20,
      paddingVertical: 13,
      borderRadius: 14,
      borderWidth: 1.5,
    },
    resetBtnText: { fontSize: 15, fontWeight: '600' },
    overContainer: { alignItems: 'center', paddingVertical: 12, gap: 10 },
    overText: { fontSize: 52, fontWeight: '900', letterSpacing: 2 },
    overSub: { fontSize: 15 },
    countdownContainer: { alignItems: 'center', gap: 12 },
    countdownLabel: { fontSize: 13, letterSpacing: 0.5, textTransform: 'uppercase' },
    countdownRow: { flexDirection: 'row', alignItems: 'flex-start', gap: 6, justifyContent: 'center' },
    timeBlock: { alignItems: 'center', gap: 4 },
    countdownNum: { fontSize: 58, fontWeight: '800', lineHeight: 66 },
    countdownUnit: { fontSize: 11, fontWeight: '600', letterSpacing: 1.5 },
    sep: { fontSize: 50, fontWeight: '800', marginTop: 4 },
    placeholder: { fontSize: 15, textAlign: 'center', paddingVertical: 24, lineHeight: 24 },
    clock: { marginTop: 24, fontSize: 13, letterSpacing: 1.5 },
    focusRoot: { alignItems: 'center', justifyContent: 'center', paddingHorizontal: 10 },
    focusCountdown: { alignItems: 'center', gap: 16, width: '100%' },
    focusLabel: { fontSize: 16, letterSpacing: 0.5, textTransform: 'uppercase' },
    focusNum: { fontSize: 72, fontWeight: '800', lineHeight: 80 },
    focusSep: { fontSize: 56, fontWeight: '800', marginTop: 8 },
    focusOverText: { fontSize: 72 },
    focusExitBtn: {
      position: 'absolute',
      bottom: 40,
      right: 32,
      paddingHorizontal: 18,
      paddingVertical: 10,
      borderRadius: 20,
      borderWidth: 1.5,
    },
    focusExitText: { fontSize: 14, fontWeight: '600' },
  });
}