/* public/css/styles.css */

/* 1) RESET */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 2) VARIABLES */
:root {
  --black:       #000000;
  --dark-gray:   #1C1C1C;
  --white:       #FFFFFF;
  --gray-200:    #C4C4C4;
  --gray-600:    #6B6B6B;
  --overlay:     rgba(0, 0, 0, 0.6);
  --green:       #25D366;
  --transition:  0.3s ease;
}

/* 3) BASE */
body {
  font-family: Arial, sans-serif;
  line-height: 1.6;
  background: var(--white);
  color: var(--white);
}
a {
  text-decoration: none;
}
img {
  display: block;
  max-width: 100%;
}

/* Utility */
.text-center { text-align: center; }
.text-white  { color: var(--white); }
.bg-black    { background: var(--black); }
.bg-dark     { background: var(--dark-gray); }

/* 4) BUTTONS */
.btn {
  display: inline-block;
  font-weight: bold;
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
  border-radius: 9999px;
  font-size: 1rem;
}
.btn-primary {
  background: var(--white);
  color: var(--black);
  padding: 0.75rem 3rem;
  border: none;
}
.btn-primary:hover {
  background: rgb(153, 153, 153);
}
.btn-outline {
  background: transparent;
  color: var(--white);
  padding: 0.75rem 2rem;
  border: 2px solid var(--white);
}
.btn-outline:hover {
  background: var(--white);
  color: var(--black);
}
.btn-success {
  background: var(--green);
  color: var(--white);
  padding: 0.75rem 2rem;
  border: none;
}
.btn-success:hover {
  background: #1ebe57;
}