/* ============================================================
   THE HUMAN ELEMENT — DESIGN TOKENS
   Near-monochrome ink-on-paper base, one warm orange accent,
   plus supporting blue / teal / lilac accents.
   ============================================================ */

/* Archivo — grotesque (regular through black, plus expanded display) */
@import url('https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,400..900;1,400..700&family=Archivo+Expanded:wght@600;700;800&display=swap');

@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/InstrumentSerif-Regular.ttf') format('truetype');
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/InstrumentSerif-Italic.ttf') format('truetype');
}

:root {
  /* ---- Brand palette ---- */
  --he-orange:        #ff6a43;
  --he-orange-soft:   #ffb39f;
  --he-blue:          #5479f7;
  --he-teal:          #2fa985;
  --he-lilac:         #a78bea;
  --he-grey:          #d9d9d9;
  --he-grey-light:    #f5f5f5;
  --he-ink:           #111111;
  --he-white:         #ffffff;

  --he-orange-deep:   #e8542f;
  --he-orange-tint:   #fff1ec;
  --he-blue-deep:     #3a5fe0;
  --he-blue-tint:     #eef2ff;
  --he-teal-deep:     #1d7a5e;
  --he-teal-tint:     #e3f3ed;
  --he-lilac-deep:    #6a4bbf;
  --he-lilac-tint:    #efe9fb;
  --he-grey-dark:     #8a8a8a;
  --he-ink-soft:      #3a3a3a;
  --he-grey-1:        #f5f5f5;
  --he-grey-2:        #e8e8e8;
  --he-grey-3:        #d9d9d9;

  /* ---- Fonts ---- */
  --font-grotesque:  'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --font-display:    'Archivo Expanded', 'Archivo', sans-serif;
  --font-serif:      'Instrument Serif', Georgia, 'Times New Roman', serif;

  /* ---- Spacing ---- */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.5rem;
  --space-6:  2rem;
  --space-7:  3rem;
  --space-8:  4rem;
  --space-9:  6rem;
  --space-10: 8rem;

  /* ---- Radii ---- */
  --radius-sm:  4px;
  --radius-lg:  14px;
  --radius-pill: 999px;

  /* ---- Motion ---- */
  --ease-standard: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast:   140ms;
  --dur-base:   240ms;
  --dur-slow:   420ms;

  --container-max: 1200px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--he-white);
  color: var(--he-ink);
  font-family: var(--font-grotesque);
}

a {
  color: var(--he-ink);
  transition: color var(--dur-base) var(--ease-standard);
}
a:hover { color: var(--he-orange); }

img { max-width: 100%; }

@keyframes heFadeUp {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}