/* ============================================
   CodeMate — Design System
   main.css — start every new file by linking this
   ============================================ */

/* Cabinet Grotesk for headlines, Inter for everything else */
@import url('https://fonts.googleapis.com/css2?family=Cabinet+Grotesk:wght@400;500;700;800&family=Inter:wght@400;500&display=swap');

/* --- Color tokens ---
   Define once here, use everywhere else.
   Change a color here and it updates across the whole product. */
:root {
  --bg:           #0F0B0C;   /* deep dark with a hint of warmth */
  --surface:      #171213;   /* card and nav backgrounds */
  --border:       #2C1F22;   /* all borders — warm dark */
  --accent:       #FB7185;   /* rose — the new CodeMate colour */
  --accent-dim:   rgba(251, 113, 133, 0.08);  /* rose at low opacity — pill backgrounds */
  --accent-border: rgba(251, 113, 133, 0.2);  /* rose border — pills and hover states */
  --text:         #FAF0F2;   /* primary text — warm white */
  --muted:        #B08890;   /* secondary text */
  --subtle:       #5C3A42;   /* tertiary text — timestamps, labels */
}
/* --- Reset ---
   Browsers add their own margins and padding by default.
   This clears all of that so we start from zero. */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box; /* padding doesn't add to width — cleaner layouts */
}

/* --- Base ---
   These styles apply to the whole page unless overridden */
body {
  background-color: var(--bg);
  color: var(--text);
  font-family: 'Inter', sans-serif;
  font-size: 1rem;        /* 16px — readable on mobile */
  line-height: 1.7;       /* breathing room between lines */
  -webkit-font-smoothing: antialiased; /* crisper text on Mac/iOS */
}

/* --- Typography ---
   Cabinet Grotesk is for anything that needs personality.
   Inter handles the body — it's built for screens. */
h1, h2, h3, h4 {
  font-family: 'Cabinet Grotesk', sans-serif;
  color: var(--text);
  line-height: 1.15;
  letter-spacing: -0.02em; /* tighter tracking looks more premium */
}

h1 { font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 800; }
h2 { font-size: clamp(1.5rem, 3vw, 2.25rem); font-weight: 700; }
h3 { font-size: 1.25rem; font-weight: 700; }
h4 { font-size: 1rem; font-weight: 500; }

p {
  color: var(--muted);
  max-width: 60ch; /* stops paragraphs from stretching too wide on big screens */
}

a {
  color: var(--accent);
  text-decoration: none;
}

a:hover {
  opacity: 0.85;
}

/* --- Accent color utility ---
   Slap .text-accent on anything that needs the amber color */
.text-accent { color: var(--accent); }

/* --- Buttons ---
   Two types: primary (filled amber) and ghost (outlined) */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 22px;
  border-radius: 8px;
  font-family: 'Inter', sans-serif;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  border: none;
  transition: opacity 0.15s ease;
}

.btn:hover { opacity: 0.88; }

.btn-primary {
  background: var(--accent);
  color: #0C0C0C; /* dark text on amber — better contrast than white */
}

.btn-ghost {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border);
}

/* --- Cards ---
   The base card — used for profiles, features, anything boxed */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.25rem;
}

/* --- Tags / tech stack pills ---
   Small rounded labels for languages, skills, etc. */
.tag {
  display: inline-block;
  background: #1E1E1E;
  border: 1px solid #2A2A2A;
  color: var(--muted);
  font-size: 0.6875rem;
  padding: 3px 10px;
  border-radius: 100px;
}

/* --- Score pill ---
   The amber CodeMate Score badge */
.score-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--accent-dim);
  border: 1px solid var(--accent-border);
  color: var(--accent);
  font-size: 0.6875rem;
  padding: 4px 10px;
  border-radius: 100px;
}

/* --- Layout wrapper ---
   Centers content and keeps it from stretching on wide screens */
.container {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 1.25rem;
}

/* --- Section spacing ---
   Every page section gets breathing room top and bottom */
.section {
  padding: 5rem 0;
}

/* --- Divider ---
   Thin separator line using the border color */
.divider {
  border: none;
  border-top: 1px solid var(--border);
}