/* assets/css/base.css
   Reset + Typography + Color tokens (Open Sans) */

:root {
  --nav-h: 76px;
  /* Color scheme from components.pdf */
  --color-primary: #ed784d; /* Primary */
  --color-accent: #2f4d6e; /* Accent */
  --color-bg: #ffffff; /* Background */
  --color-surface: #e2e6ec; /* Surface */
  --color-surface2: #fceae4; /* Surface #2 */
  --color-text: #283141; /* Text */
  --color-subtext: #757575; /* Subtext */
  --color-muted: #d4d4d4; /* Muted */

  --color-success: #21c45d;
  --color-warning: #f49e0a;
  --color-danger: #ef4444;

  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --radius-xl: 22px;

  --shadow-soft: 0 12px 30px rgba(0, 0, 0, 0.1);
  --shadow-card: 0 10px 24px rgba(0, 0, 0, 0.08);

  --container: 1180px;
  --gutter: 24px;
  --section-pad: 72px;

  --transition: 180ms ease;
}

* {
  box-sizing: border-box;
}
html,
body {
  height: 100%;
}
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  padding-top: var(--nav-h);
  margin: 0;
  font-family:
    "Open Sans",
    system-ui,
    -apple-system,
    Segoe UI,
    Roboto,
    Arial,
    sans-serif;
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.45;
}

img {
  max-width: 100%;
  display: block;
}
a {
  color: inherit;
  text-decoration: none;
}
button,
input,
textarea,
select {
  font: inherit;
}

h1,
h2,
h3,
h4,
h5 {
  margin: 0 0 10px;
  line-height: 1.1;
  color: var(--color-text);
}
h1 {
  font-size: clamp(40px, 4.6vw, 64px);
  letter-spacing: -1px;
}
h2 {
  font-size: clamp(32px, 3.2vw, 48px);
  letter-spacing: -0.6px;
}
h3 {
  font-size: clamp(24px, 2.4vw, 34px);
}
h4 {
  font-size: 22px;
}
h5 {
  font-size: 18px;
}

p {
  margin: 0 0 12px;
  color: var(--color-subtext);
}

::selection {
  background: rgba(237, 120, 77, 0.25);
}

main {
  flex: 1 0 auto;
}