/*
 * pursuits.careers — site styles
 *
 * Palette mirrors shiny_app/R/brand.R constants (light theme primary surface).
 * Replicated as CSS custom properties so the site has no R build-time dependency.
 * Colour-blind safety: deep teal #0D7377 + dark red #A82020 form the brand pair.
 * Roadmap #60 audit (deuteranopia / protanopia / tritanopia) tracks the full sweep.
 */

:root {
  /* Mirror of brand.R light theme — keep in sync manually until #60 lands. */
  --brand-primary: #0D7377;
  --brand-secondary: #14BDBC;
  --brand-success: #2E7D32;
  --brand-warning: #C07A1A;
  --brand-danger: #A82020;
  --brand-info: #1565C0;
  --brand-body-bg: #F7F8FA;
  --brand-body-colour: #1A1F2E;
  --brand-card-bg: #FFFFFF;

  /* Type scale — print-safe sizing. Inter / DM Serif Display loaded via Google Fonts. */
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-heading: "DM Serif Display", Georgia, "Times New Roman", serif;
}

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&family=DM+Serif+Display&display=swap");

body {
  background-color: var(--brand-body-bg);
  color: var(--brand-body-colour);
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.6;
}

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: normal;
  color: var(--brand-body-colour);
  line-height: 1.2;
}

a {
  color: var(--brand-primary);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-bottom-color 120ms ease;
}

a:hover, a:focus {
  border-bottom-color: var(--brand-primary);
}

main.content {
  max-width: 720px;
  margin: 0 auto;
  padding: 3rem 1.5rem 4rem;
}

.hero {
  padding: 4rem 0 3rem;
  border-bottom: 1px solid rgba(13, 115, 119, 0.15);
  margin-bottom: 2rem;
}

.hero h1 {
  font-size: clamp(2.5rem, 5vw, 3.75rem);
  margin-bottom: 0.5rem;
  color: var(--brand-primary);
}

.footer {
  margin-top: 4rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(26, 31, 46, 0.1);
  font-size: 0.875rem;
  color: rgba(26, 31, 46, 0.6);
}

@media (max-width: 600px) {
  main.content {
    padding: 2rem 1rem 3rem;
  }
  .hero {
    padding: 2rem 0 1.5rem;
  }
}