@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap");
@import url("./layout.css");
@import url("./components.css");
@import url("./utilities.css");

:root {
  color-scheme: light;

  --blue-950: #10264c;
  --blue-900: #17315f;
  --blue-800: #234476;
  --blue-700: #32598e;

  --ochre-700: #8c6728;
  --ochre-600: #b98d37;
  --ochre-500: #d6a84b;
  --ochre-300: #ebd39c;

  --slate-950: #1d2740;
  --slate-700: #425172;
  --slate-300: #b8c6de;
  --slate-200: #dbe2ef;
  --slate-100: #f0f3f8;
  --slate-050: #f5f6f8;
  --white: #ffffff;

  --color-bg: var(--slate-050);
  --color-surface: var(--white);
  --color-surface-muted: var(--slate-100);
  --color-text: var(--slate-950);
  --color-text-soft: var(--slate-700);
  --color-primary: var(--blue-900);
  --color-primary-strong: var(--blue-950);
  --color-accent: var(--ochre-500);
  --color-accent-strong: var(--ochre-600);
  --color-border: var(--slate-200);
  --color-input-border: var(--slate-300);
  --color-testimonial-bg: #fbf7ef;

  --bg: var(--color-bg);
  --surface: var(--color-surface);
  --surface-muted: var(--color-surface-muted);
  --text: var(--color-text);
  --text-soft: var(--color-text-soft);
  --primary: var(--color-primary);
  --primary-strong: var(--color-primary-strong);
  --accent: var(--color-accent);
  --accent-strong: var(--color-accent-strong);
  --line: var(--color-border);

  --radius: 0.55rem;
  --radius-lg: 0.75rem;
  --shadow: 0 8px 24px rgb(16 38 76 / 0.08);
  --shadow-soft: 0 4px 16px rgb(16 38 76 / 0.06);
  --container-max: 72rem;
  --space-1: 0.5rem;
  --space-2: 0.75rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;
  --space-6: 3rem;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  line-height: 1.5;
  hanging-punctuation: first last;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: "Manrope", "Segoe UI Variable Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--text);
  background: var(--bg);
  font-weight: 500;
}

h1,
h2,
h3,
p,
ul {
  margin: 0;
}

ul {
  padding: 0;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
}

main {
  display: block;
}