/* ===========================
   Imports & Resets
=========================== */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100..900&family=Manrope:wght@200..800&family=Poppins:wght@100..900&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

a {
  text-decoration: none;
  color: inherit;
}

/* ===========================
   Root Variables
=========================== */
:root {
  /* --- Core Brand Palette (Modern / Neutral + Accent) --- */
  --clr-bg-dark: #111418; /* Deep charcoal — softer than pure black */
  --clr-bg-main: #181c20; /* Slightly lighter layer (main sections) */
  --clr-bg-accent: #222831; /* Card or container backgrounds */

  --clr-accent: #00adb5; /* Modern cyan accent */
  --clr-accent-strong: #06d6a0; /* Brighter mint for highlights */

  /* --- Text Colors --- */
  --clr-text-main: #f5f6f7; /* High contrast text */
  --clr-text-muted: #a5aab3; /* Muted for secondary info */
  --clr-text-accent: var(--clr-accent);

  /* --- Font Families --- */
  --font-heading: "Poppins", sans-serif;
  --font-body: "Manrope", "Inter", sans-serif;

  /* --- Shape & Depth --- */
  --radius: 12px; /* Adjust this for roundness of cards/buttons */
  --shadow-elevate: 0 4px 20px rgba(0, 0, 0, 0.25);

  /* --- Transition / Motion --- */
  --transition-speed: 0.3s ease;
}

/* ===========================
   Base Typography & Layout
=========================== */
body {
  font-family: var(--font-body);
  color: var(--clr-text-main);
  background-color: var(--clr-bg-dark);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* Example usage of radius + accent */
.card {
  background-color: var(--clr-bg-accent);
  border-radius: var(--radius);
  box-shadow: var(--shadow-elevate);
  padding: 1.5rem;
  transition: transform var(--transition-speed),
    box-shadow var(--transition-speed);
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
}

.button {
  display: inline-block;
  background-color: var(--clr-accent);
  color: #fff;
  font-weight: 600;
  border: none;
  border-radius: var(--radius);
  padding: 0.75rem 1.5rem;
  transition: background-color var(--transition-speed),
    transform var(--transition-speed);
}

.button:hover {
  background-color: var(--clr-accent-strong);
  transform: translateY(-2px);
}