/* ============================================================
   Aspect Ecology — Design Tokens
   ------------------------------------------------------------
   The single source of truth for colours, type, spacing,
   radii, shadows, and motion. Both base tokens and semantic
   vars are exposed.
   ============================================================ */

/* Webfonts ---------------------------------------------------- */
/* Self-hosted (subset: latin). Files live under /fonts.
   Locked April 2026 — Space Grotesk + Inter Tight + JetBrains Mono. */
@import url('./fonts/fonts.css');

:root {
  /* ----- Colour : brand greens ----- */
  --ae-green-primary:   #57A108;   /* logo green; brand */
  --ae-green-primary-d: #3F7806;   /* press / hover-deep */
  --ae-green-primary-l: #6BB81A;
  --ae-green-secondary: #92D050;   /* field green */
  --ae-green-secondary-d: #76B638;

  /* ----- Colour : sky / data accents ----- */
  --ae-sky:        #7BB6D9;
  --ae-sky-pale:   #D6E8F2;
  --ae-sky-deep:   #3B6E8F;

  /* ----- Colour : neutrals ----- */
  --ae-charcoal:   #1F2A24;        /* body text, dark surfaces */
  --ae-charcoal-d: #14201A;        /* footer, hover dark */
  --ae-slate:      #5C6B66;        /* secondary text */
  --ae-slate-l:    #8B9892;        /* tertiary, axis labels */
  --ae-sand:       #F2EEE6;        /* warm neutral background */
  --ae-bone:       #FAF8F3;        /* card surface on sand */
  --ae-white:      #FFFFFF;
  --ae-hairline:   rgba(31, 42, 36, 0.10);
  --ae-hairline-strong: rgba(31, 42, 36, 0.18);
  --ae-overlay-hover:  rgba(31, 42, 36, 0.04);
  --ae-overlay-press:  rgba(31, 42, 36, 0.10);

  /* ----- Colour : semantic ----- */
  --ae-fg:         var(--ae-charcoal);
  --ae-fg-2:       var(--ae-slate);
  --ae-fg-3:       var(--ae-slate-l);
  --ae-fg-on-dark: var(--ae-white);
  --ae-fg-on-dark-2: rgba(255, 255, 255, 0.72);

  --ae-bg:         var(--ae-white);
  --ae-bg-warm:    var(--ae-sand);
  --ae-bg-card:    var(--ae-white);
  --ae-bg-card-warm: var(--ae-bone);
  --ae-bg-dark:    var(--ae-charcoal);

  --ae-accent:     var(--ae-green-primary);
  --ae-accent-2:   var(--ae-sky-deep);

  --ae-link:       var(--ae-green-primary);
  --ae-link-hover: var(--ae-green-primary-d);
  --ae-link-on-dark: var(--ae-sky);

  --ae-focus:      var(--ae-sky);

  /* ----- Type : families ----- */
  --ae-font-display: 'Space Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --ae-font-body:    'Inter Tight', 'Helvetica Neue', Arial, sans-serif;
  --ae-font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ----- Type : scale ----- */
  --ae-text-eyebrow: 12px;
  --ae-text-caption: 13px;
  --ae-text-body-s:  14px;
  --ae-text-body:    16px;
  --ae-text-body-l:  18px;
  --ae-text-lead:    20px;
  --ae-text-h6:      18px;
  --ae-text-h5:      22px;
  --ae-text-h4:      28px;
  --ae-text-h3:      36px;
  --ae-text-h2:      48px;
  --ae-text-h1:      64px;
  --ae-text-display: 88px;

  /* ----- Type : line heights ----- */
  --ae-lh-tight:  1.05;
  --ae-lh-snug:   1.2;
  --ae-lh-normal: 1.45;
  --ae-lh-body:   1.65;

  /* ----- Type : tracking ----- */
  --ae-tr-tight:  -0.02em;
  --ae-tr-snug:   -0.01em;
  --ae-tr-normal: 0;
  --ae-tr-wide:   0.04em;
  --ae-tr-eyebrow: 0.16em;

  /* ----- Spacing : 8-pt scale ----- */
  --ae-s-0: 0;
  --ae-s-1: 4px;
  --ae-s-2: 8px;
  --ae-s-3: 12px;
  --ae-s-4: 16px;
  --ae-s-5: 24px;
  --ae-s-6: 32px;
  --ae-s-7: 48px;
  --ae-s-8: 64px;
  --ae-s-9: 96px;
  --ae-s-10: 128px;

  /* ----- Layout ----- */
  --ae-container: 1280px;
  --ae-gutter:    48px;
  --ae-gutter-md: 24px;
  --ae-gutter-sm: 20px;

  /* ----- Radii ----- */
  --ae-r-0: 0;
  --ae-r-1: 2px;     /* buttons, fields */
  --ae-r-2: 4px;     /* cards */
  --ae-r-pill: 999px;

  /* ----- Borders ----- */
  --ae-bw-1: 1px;
  --ae-bw-2: 1.5px;

  /* ----- Shadows (used sparingly) ----- */
  --ae-shadow-0: none;
  --ae-shadow-1: 0 1px 2px rgba(31, 42, 36, 0.06), 0 8px 24px rgba(31, 42, 36, 0.06);
  --ae-shadow-nav: 0 1px 0 rgba(31, 42, 36, 0.06);
  --ae-shadow-focus: 0 0 0 2px var(--ae-bg), 0 0 0 4px var(--ae-focus);

  /* ----- Motion ----- */
  --ae-ease:        cubic-bezier(0.22, 1, 0.36, 1);
  --ae-dur-1:       120ms;     /* hover */
  --ae-dur-2:       300ms;     /* state */
  --ae-dur-3:       600ms;     /* reveal */

  /* ----- Image protection gradient ----- */
  --ae-protect: linear-gradient(180deg,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,0) 40%,
    rgba(0,0,0,0.45) 100%);
}

/* ============================================================
   Base / element semantics
   ============================================================ */

html, body {
  background: var(--ae-bg);
  color: var(--ae-fg);
  font-family: var(--ae-font-body);
  font-size: var(--ae-text-body);
  line-height: var(--ae-lh-body);
  font-feature-settings: 'ss01', 'cv11';
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, .ae-h1 {
  font-family: var(--ae-font-display);
  font-weight: 600;
  font-size: var(--ae-text-h1);
  line-height: var(--ae-lh-tight);
  letter-spacing: var(--ae-tr-tight);
  color: var(--ae-fg);
  margin: 0;
  text-wrap: balance;
}
h2, .ae-h2 {
  font-family: var(--ae-font-display);
  font-weight: 600;
  font-size: var(--ae-text-h2);
  line-height: var(--ae-lh-snug);
  letter-spacing: var(--ae-tr-tight);
  color: var(--ae-fg);
  margin: 0;
  text-wrap: balance;
}
h3, .ae-h3 {
  font-family: var(--ae-font-display);
  font-weight: 600;
  font-size: var(--ae-text-h3);
  line-height: var(--ae-lh-snug);
  letter-spacing: var(--ae-tr-snug);
  color: var(--ae-fg);
  margin: 0;
}
h4, .ae-h4 {
  font-family: var(--ae-font-display);
  font-weight: 600;
  font-size: var(--ae-text-h4);
  line-height: var(--ae-lh-snug);
  letter-spacing: var(--ae-tr-snug);
  color: var(--ae-fg);
  margin: 0;
}
h5, .ae-h5 {
  font-family: var(--ae-font-display);
  font-weight: 500;
  font-size: var(--ae-text-h5);
  line-height: var(--ae-lh-normal);
  color: var(--ae-fg);
  margin: 0;
}
h6, .ae-h6 {
  font-family: var(--ae-font-display);
  font-weight: 500;
  font-size: var(--ae-text-h6);
  line-height: var(--ae-lh-normal);
  color: var(--ae-fg);
  margin: 0;
}
p, .ae-p {
  font-family: var(--ae-font-body);
  font-weight: 400;
  font-size: var(--ae-text-body);
  line-height: var(--ae-lh-body);
  color: var(--ae-fg);
  margin: 0;
  text-wrap: pretty;
}
.ae-lead {
  font-size: var(--ae-text-lead);
  line-height: 1.5;
  color: var(--ae-fg);
  font-weight: 400;
}
.ae-eyebrow {
  font-family: var(--ae-font-display);
  font-size: var(--ae-text-eyebrow);
  font-weight: 600;
  letter-spacing: var(--ae-tr-eyebrow);
  text-transform: uppercase;
  color: var(--ae-green-primary);
}
.ae-eyebrow--slate { color: var(--ae-slate); }
.ae-caption {
  font-family: var(--ae-font-body);
  font-size: var(--ae-text-caption);
  color: var(--ae-fg-2);
  letter-spacing: 0;
}
.ae-mono, code, kbd, samp {
  font-family: var(--ae-font-mono);
  font-size: 0.9em;
  font-feature-settings: 'tnum', 'zero';
}
.ae-tabular { font-variant-numeric: tabular-nums; }

a, .ae-link {
  color: var(--ae-link);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color var(--ae-dur-1) var(--ae-ease),
              border-color var(--ae-dur-1) var(--ae-ease);
}
a:hover, .ae-link:hover {
  color: var(--ae-link-hover);
  border-bottom-color: currentColor;
}
em.ae-binomial, .ae-binomial { font-style: italic; }

::selection { background: var(--ae-green-secondary); color: var(--ae-charcoal); }

/* Utility: rule beneath eyebrow */
.ae-rule {
  display: block;
  width: 32px; height: 2px;
  background: var(--ae-green-primary);
  margin: 12px 0 24px;
}
.ae-rule--slate { background: var(--ae-slate-l); }
.ae-rule--long { width: 64px; }