/* main.css: design tokens, typography, base styles */

:root{
  --brand-orange: #F6AA14;
  --brand-blue:   #2F89B3;
  --brand-teal:   #1A729D;
  --brand-dark:   #242C39;
}

:root{
  --bg: #f4f6f8;
  --surface: #ffffff;
  --text: #1f2937;
  --muted: #6b7280;
  --line: #e5e7eb;

  --brand: #f28c28;         /* inspo orange */
  --brand-2: #d97706;
  --nav: #111827;

  --shadow: 0 10px 30px rgba(17, 24, 39, 0.12);
  --shadow-soft: 0 8px 20px rgba(17, 24, 39, 0.10);

  --radius: 18px;
  --radius-sm: 12px;

  --container: 1200px;

  --font: system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Helvetica Neue", sans-serif;
}

*{ box-sizing: border-box; }
html, body{ height: 100%; }
body{
  margin: 0;
  font-family: var(--font);
  color: var(--text);
  background: var(--bg);
  line-height: 1.5;
}

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

a{ color: inherit; text-decoration: none; }
a:hover{ text-decoration: none; }

p{ margin: 0 0 14px; color: var(--muted); }
h1, h2, h3, h4{ margin: 0 0 12px; color: var(--text); line-height: 1.15; }

h1{
  font-size: clamp(32px, 4vw, 54px);
  letter-spacing: -0.02em;
}
h2{
  font-size: clamp(24px, 2.4vw, 34px);
  letter-spacing: -0.01em;
}
h3{
  font-size: 18px;
}

small{ color: var(--muted); }

::selection{ background: rgba(242, 140, 40, 0.25); }