import React from "react";

/**
 * Shared styles used across multiple pages.
 * These styles define the common layout and theming for the app.
 */
export const sharedStyles: Record<string, React.CSSProperties> = {
  main: {
    minHeight: "100vh",
    background: "linear-gradient(135deg, #0f0f23 0%, #1a1a3e 50%, #2d1b4e 100%)",
    display: "flex",
    flexDirection: "column",
  },
  loader: {
    flex: 1,
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    fontFamily: "'DM Sans', system-ui, sans-serif",
    color: "rgba(255, 255, 255, 0.5)",
    fontSize: "1.125rem",
  },
  header: {
    padding: "1.5rem 2rem",
    borderBottom: "1px solid rgba(255, 255, 255, 0.06)",
    display: "flex",
    justifyContent: "space-between",
    alignItems: "center",
  },
  nav: {
    display: "flex",
    alignItems: "center",
    gap: "0.75rem",
  },
  navLink: {
    fontFamily: "'DM Sans', system-ui, sans-serif",
    color: "rgba(255, 255, 255, 0.5)",
    fontSize: "0.875rem",
    textDecoration: "none",
    transition: "color 0.2s",
  },
  navDivider: {
    color: "rgba(255, 255, 255, 0.2)",
    fontSize: "0.75rem",
  },
  navCurrent: {
    fontFamily: "'DM Sans', system-ui, sans-serif",
    color: "#a78bfa",
    fontSize: "0.875rem",
    fontWeight: 600,
  },
  userInfo: {
    display: "flex",
    alignItems: "center",
    gap: "1rem",
  },
  userEmail: {
    fontFamily: "'DM Sans', system-ui, sans-serif",
    color: "rgba(255, 255, 255, 0.6)",
    fontSize: "0.875rem",
  },
  logoutBtn: {
    fontFamily: "'DM Sans', system-ui, sans-serif",
    padding: "0.5rem 1rem",
    fontSize: "0.875rem",
    fontWeight: 500,
    background: "rgba(255, 255, 255, 0.05)",
    color: "rgba(255, 255, 255, 0.7)",
    border: "1px solid rgba(255, 255, 255, 0.1)",
    borderRadius: "8px",
    cursor: "pointer",
    transition: "all 0.2s",
  },
  content: {
    flex: 1,
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    padding: "2rem",
  },
};