/* =========================================================
   base.css
   Global tokens + typography foundation
   ========================================================= */

:root {
  /* Typography */
  --font-family-base: 'Barlow', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-family-heading: 'Barlow', system-ui, sans-serif;

  --font-size-base: 1rem;
  --line-height-base: 1.6;

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;
  --font-weight-heavy: 800;

  /* Color */
  --color-primary: #022351;
  --color-text: #0f172a;
  --color-bg-light: #ffffff;
  --color-bg-neutral: #f4f4f4;
}

/* ---------------------------------------------------------
   Global body text
--------------------------------------------------------- */
html {
  font-size: 100%;
}

body {
  margin: 0;
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  font-weight: var(--font-weight-regular);
  color: var(--color-text);
  background-color: var(--color-bg-light);
}

/* ---------------------------------------------------------
   Headings
--------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-family-heading);
  font-weight: var(--font-weight-heavy);
  color: var(--color-primary);
  margin: 0;
}

/* Optional sizing baseline */
h2 { font-size: 2rem; }
h3 { font-size: 1.25rem; }

/* ---------------------------------------------------------
   Common content containers
--------------------------------------------------------- */
.content-section,
.career-mode,
.career-mode-portfolio {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

/* ---------------------------------------------------------
   Cards
--------------------------------------------------------- */
.card {
  background: var(--color-bg-neutral);
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
  transition: transform 0.3s ease;
}
.card:hover {
  transform: translateY(-5px);
}