@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@400;600;700&display=swap');

/* ==========================================================================
   1. VARIÁVEIS GLOBAIS (DESIGN TOKENS)
   ========================================================================== */

:root {
	--fonte-base: 'Josefin Sans', Arial, sans-serif;

	--cor-primaria: #80aebd;
	--cor-primaria-clara: lightblue;
	--cor-perigo: #bd8088;
	--cor-perigo-clara: #e6adb7;

	--cor-texto: #2b2b2b;
	--cor-fundo: #ffffff;
	--cor-borda: #eeeeee;

	--transicao-rapida: 0.3s ease;
	--espaco-sm: 0.5em;
	--espaco-md: 1em;
	--espaco-lg: 2em;
}

/* ==========================================================================
   2. RESET E BASE
   ========================================================================== */

*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	margin: 0;
	padding: 0;
	font-family: var(--fonte-base);
	color: var(--cor-texto);
	background-color: var(--cor-fundo);
	line-height: 1.6;
}

/* ==========================================================================
   3. CABEÇALHO E NAVEGAÇÃO
   ========================================================================== */

header {
	margin: 0;
}

header nav {
	background: #555;
	height: 3em;
}

header nav ul {
	margin: 0;
	padding: 0;
}

header nav ul li {
	list-style: none;
	line-height: 3em;
	float: left;
}

header nav ul li a {
	text-decoration: none;
	display: block;
	height: 100%;
	padding: 0 1em;
	color: #888;
	transition: color var(--transicao-rapida), background-color var(--transicao-rapida);
}

header nav ul li a:hover {
	color: #fff;
	background-color: #777;
}

header nav ul li:first-child a {
	font-size: 1.5em;
	color: var(--cor-primaria);
}

header nav ul li:first-child a:hover {
	color: var(--cor-primaria-clara);
}

main {
	padding: 0 1em;
	min-height: calc(100vh - 3em - 4em);
}

.container {
	max-width: 900px;
	margin: 0 auto;
	padding: var(--espaco-lg) 0;
}

.container h1 {
	margin-bottom: var(--espaco-md);
}

/* ==========================================================================
   4. FORMULÁRIO DE CADASTRO
   ========================================================================== */

main section form div {
	margin: 0 0 10px 0;
}

main section form div label {
	display: block;
	margin-bottom: 4px;
	font-weight: 600;
}

main section form div input {
	width: 20em;
	max-width: 100%;
	padding: 0.5em;
	border: 1px solid var(--cor-borda);
	border-radius: 4px;
	font-family: inherit;
}

main section form div input:focus {
	outline: 2px solid var(--cor-primaria);
	outline-offset: 1px;
}

main section form div button {
	border: none;
	padding: 10px 15px;
	background-color: var(--cor-primaria);
	color: #fff;
	border-radius: 4px;
	transition: background-color var(--transicao-rapida);
}

main section form div button:hover {
	background-color: var(--cor-primaria-clara);
	cursor: pointer;
}

/* ==========================================================================
   5. LISTAGEM DE CONTATOS
   ========================================================================== */

main section table {
	border-collapse: collapse;
	width: 100%;
}

main section table,
main section table th,
main section table td {
	border: 1px solid var(--cor-borda);
	padding: 10px 15px;
	text-align: left;
}

main section table thead th {
	background-color: #f7f7f7;
}

main section table tbody tr td a {
	text-decoration: none;
	color: var(--cor-primaria);
}

main section table tbody tr td a:hover {
	text-decoration: underline;
	color: var(--cor-primaria-clara);
}

main section table tbody tr td form button {
	border: none;
	padding: 10px 15px;
	background-color: var(--cor-perigo);
	color: #fff;
	border-radius: 4px;
	transition: background-color var(--transicao-rapida);
}

main section table tbody tr td form button:hover {
	background-color: var(--cor-perigo-clara);
	cursor: pointer;
}

/* ==========================================================================
   6. RODAPÉ
   ========================================================================== */

footer {
	background: #333;
	color: #ccc;
	text-align: center;
	padding: var(--espaco-md);
}

/* ==========================================================================
   7. RESPONSIVIDADE (MOBILE-FIRST)
   ========================================================================== */

@media (max-width: 600px) {
	main section table {
		display: block;
		overflow-x: auto;
	}

	main section form div input {
		width: 100%;
	}
}