import { StyleSheet } from "react-native";

// 색상 상수
export const COLORS = {
    primary: "#2d79f3",
    text: "#333333",
    textSecondary: "#666666",
    textDisabled: "#999999",
    border: "#ededef",
    borderActive: "#2d79f3",
    background: "#ffffff",
    overlay: "rgba(0, 0, 0, 0.5)",
    link: "#1e90ff",
    shadow: "rgba(0, 0, 0, 0.1)",
    loadingOverlay: "rgba(255, 255, 255, 0.9)",
};

export const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: "center",
        alignItems: "center",
        backgroundColor: COLORS.overlay,
    },
    modalContent: {
        backgroundColor: COLORS.background,
        padding: 32,
        gap: 16,
        borderRadius: 20,
        width: "90%",
        maxWidth: 320,
        alignItems: "center",
        boxShadow: `0px 0px 30px ${COLORS.shadow}`,
        elevation: 10,
        position: "relative",
    } as any,
    loadingOverlay: {
        position: "absolute",
        top: 0,
        left: 0,
        right: 0,
        bottom: 0,
        backgroundColor: COLORS.loadingOverlay,
        justifyContent: "center",
        alignItems: "center",
        borderRadius: 20,
        zIndex: 1,
    },
    loadingText: {
        marginTop: 12,
        fontSize: 16,
        color: COLORS.text,
        fontWeight: "500",
    },
    title: {
        fontSize: 24,
        fontWeight: "600",
        color: COLORS.text,
        marginBottom: 8,
        textAlign: "center",
    },
    logo: {
        width: 60,
        height: 60,
        marginBottom: 8,
    },
    termsText: {
        fontSize: 14,
        color: COLORS.textSecondary,
        textAlign: "center",
        marginTop: 12,
    },
    link: {
        color: COLORS.link,
        textDecorationLine: "underline",
        fontWeight: "500",
    },
});