/* ==========================================================================
   aimento Design System — Foundations
   Colors, typography, spacing, and motion tokens
   ========================================================================== */

/* DM Sans — primary typeface (Google Fonts) */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700;9..40,800;9..40,900&display=swap');

:root {
  /* ---------- Color: Surfaces ---------- */
  --bg:           #F5F4F0;   /* warm off-white page background */
  --bg-tint:      #EDEBE4;   /* slightly deeper warm tone — quote blocks, hover */
  --surface:      #FFFFFF;   /* card / elevated surface */
  --surface-2:    #FAF9F6;   /* subtle off-white, between bg and surface */

  /* ---------- Color: Foreground ---------- */
  --fg-1:         #1A1918;   /* primary text — near-black charcoal */
  --fg-2:         #4A4845;   /* secondary text — softer charcoal */
  --fg-3:         #8A8782;   /* tertiary / meta text */
  --fg-on-accent: #F5F4F0;   /* text on the accent surface */

  /* ---------- Color: Accent (the only accent) ---------- */
  --accent:       #1B4F5E;   /* deep petrol */
  --accent-hover: #154049;   /* darker on hover */
  --accent-press: #0F2E36;   /* darkest on press */
  --accent-tint:  #E5DDD0;   /* warm sand tint — backgrounds, badges */

  /* ---------- Color: Lines & dividers ---------- */
  --line:         #E4E2DB;   /* hairline borders on warm bg */
  --line-strong:  #C9C6BD;   /* heavier dividers */
  --line-on-white: #ECEAE4;  /* hairline on white surface */

  /* ---------- Type: Family ---------- */
  --font-sans: 'DM Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* ---------- Type: Scale (1.25 ratio, anchored to 16px) ---------- */
  --fs-eyebrow:   12px;   /* small caps labels */
  --fs-meta:      14px;
  --fs-body:      17px;   /* default body */
  --fs-lead:      20px;   /* lead paragraph */
  --fs-h4:        22px;
  --fs-h3:        28px;
  --fs-h2:        40px;
  --fs-h1:        56px;
  --fs-display:   80px;   /* hero display */

  /* ---------- Type: Weights ---------- */
  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;
  --fw-black:     900;

  /* ---------- Type: Line height ---------- */
  --lh-tight:     1.05;
  --lh-snug:      1.2;
  --lh-normal:    1.45;
  --lh-relaxed:   1.6;

  /* ---------- Type: Letter spacing ---------- */
  --ls-display:   -0.02em;  /* tighten very large display */
  --ls-heading:   -0.01em;  /* slight tighten on headings */
  --ls-body:       0;
  --ls-eyebrow:    0.12em;  /* generous tracking on small caps labels */

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

  /* ---------- Layout ---------- */
  --container-max: 1100px;
  --section-pad-y: 112px;   /* vertical section padding (80–120 range) */
  --section-pad-y-sm: 80px;

  /* ---------- Radii ---------- */
  --radius-sm:  6px;
  --radius-md:  8px;   /* buttons */
  --radius-lg:  12px;  /* cards */
  --radius-xl:  20px;  /* large feature cards */
  --radius-pill: 999px;

  /* ---------- Shadow / elevation ---------- */
  --shadow-xs: 0 1px 2px rgba(26, 25, 24, 0.04);
  --shadow-sm: 0 2px 6px rgba(26, 25, 24, 0.05), 0 1px 2px rgba(26, 25, 24, 0.04);
  --shadow-md: 0 8px 24px rgba(26, 25, 24, 0.06), 0 2px 6px rgba(26, 25, 24, 0.04);
  --shadow-lg: 0 24px 48px rgba(26, 25, 24, 0.08), 0 4px 12px rgba(26, 25, 24, 0.05);

  /* ---------- Motion ---------- */
  --ease-out:     cubic-bezier(0.22, 0.61, 0.36, 1);    /* default — confident settle */
  --ease-in-out:  cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:     140ms;
  --dur-base:     220ms;
  --dur-slow:     360ms;
}

/* ==========================================================================
   Base elements — semantic mapping to tokens
   ========================================================================== */

html, body {
  background: var(--bg);
  color: var(--fg-1);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-relaxed);
  letter-spacing: var(--ls-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--fg-1);
  text-wrap: balance;
}

h1, .h1 {
  font-size: var(--fs-h1);
  font-weight: var(--fw-black);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-heading);
}

h2, .h2 {
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-heading);
}

h3, .h3 {
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-heading);
}

h4, .h4 {
  font-size: var(--fs-h4);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
}

.display {
  font-size: var(--fs-display);
  font-weight: var(--fw-black);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
}

.eyebrow {
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--fg-2);
}

.lead {
  font-size: var(--fs-lead);
  font-weight: var(--fw-regular);
  line-height: var(--lh-relaxed);
  color: var(--fg-2);
  text-wrap: pretty;
}

p {
  margin: 0;
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  color: var(--fg-1);
  text-wrap: pretty;
}

.meta {
  font-size: var(--fs-meta);
  color: var(--fg-3);
  font-weight: var(--fw-medium);
}