/* ============================================================
   PATHLINE DESIGN SYSTEM — Foundations
   Colors + Type tokens (base + semantic)
   Fonts loaded from Google Fonts (see note in README — these are
   NEAREST-MATCH substitutions for the brand's unknown grotesque).
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&family=Ojuju:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
  /* ---------- BASE: type families ---------- */
  --font-sans: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --font-logo: 'Ojuju', 'Hanken Grotesk', sans-serif;  /* wordmark / logotype */

  /* ---------- BASE: ink / neutrals ---------- */
  --ink:        #181A24;   /* near-black navy — primary text, black buttons */
  --ink-2:      #5E626C;   /* secondary text */
  --ink-3:      #9AA0A8;   /* tertiary / captions / placeholders */
  --ink-4:      #C2C6CD;   /* disabled, faint */

  --paper:      #FFFFFF;   /* primary surface (the white card/container) */
  --surface-2:  #F6F6F8;   /* subtle raised/inset panel */
  --canvas:     #ECEBF0;   /* lavender-grey app/page ground */
  --canvas-2:   #E2E1E8;   /* deeper ground */

  --line:       rgba(24, 26, 36, 0.10);  /* hairline borders */
  --line-2:     rgba(24, 26, 36, 0.06);  /* faintest dividers */
  --line-strong:rgba(24, 26, 36, 0.16);

  /* ---------- BASE: brand accents (the "constellation" set) ---------- */
  --blue:       #1E8FF0;   /* primary brand accent — cobalt */
  --blue-ink:   #0E6BC4;   /* pressed / text-on-light blue */
  --forest:     #C7937D;   /* clay / warm terracotta accent */
  --forest-2:   #2E7A3A;
  --lilac:      #D49CEE;   /* soft lilac */
  --lime:       #99C7E0;   /* powder blue accent */
  --sage:       #BFD6BD;   /* muted sage */
  --sky:        #E8F2FD;   /* tint wash of blue */

  /* ---------- BASE: semantic status ---------- */
  --positive:   #2E7A3A;
  --warning:    #C98A14;
  --critical:   #C4453B;
  --info:       var(--blue);

  /* ---------- BASE: radii ---------- */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* ---------- BASE: spacing (4px base unit) ---------- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;

  /* ---------- BASE: elevation ---------- */
  --shadow-sm: 0 1px 2px rgba(24,26,36,0.06), 0 1px 1px rgba(24,26,36,0.04);
  --shadow-md: 0 4px 12px rgba(24,26,36,0.08), 0 1px 3px rgba(24,26,36,0.05);
  --shadow-lg: 0 18px 48px rgba(24,26,36,0.16), 0 4px 12px rgba(24,26,36,0.08);
  --shadow-card: 0 24px 60px rgba(24,26,36,0.18);  /* the floating white container */

  /* ============================================================
     SEMANTIC TYPE ROLES
     font / size / line-height / weight / tracking per role
     ============================================================ */
  /* Display & headings — Hanken Grotesk, tight tracking, snug leading */
  --display-font: var(--font-sans);
  --display-weight: 600;
  --display-tracking: -0.022em;

  --fg1: var(--ink);
  --fg2: var(--ink-2);
  --fg3: var(--ink-3);
}

/* ---------- SEMANTIC TYPE CLASSES ---------- */
.t-display {           /* hero / page hero */
  font-family: var(--display-font);
  font-size: clamp(40px, 5.2vw, 72px);
  line-height: 1.02;
  font-weight: 600;
  letter-spacing: -0.028em;
  color: var(--fg1);
}
.t-h1 {
  font-family: var(--font-sans);
  font-size: clamp(32px, 3.4vw, 46px);
  line-height: 1.06;
  font-weight: 600;
  letter-spacing: -0.024em;
  color: var(--fg1);
}
.t-h2 {
  font-family: var(--font-sans);
  font-size: 30px;
  line-height: 1.12;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--fg1);
}
.t-h3 {
  font-family: var(--font-sans);
  font-size: 22px;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--fg1);
}
.t-lead {              /* intro paragraph / subtitle */
  font-family: var(--font-sans);
  font-size: 18px;
  line-height: 1.5;
  font-weight: 400;
  color: var(--fg2);
}
.t-body {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.55;
  font-weight: 400;
  color: var(--fg2);
}
.t-small {
  font-family: var(--font-sans);
  font-size: 13.5px;
  line-height: 1.45;
  font-weight: 400;
  color: var(--ink-2);
}
.t-eyebrow {           /* "How It Works" pill / section label */
  font-family: var(--font-sans);
  font-size: 12.5px;
  line-height: 1;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--fg1);
}
.t-mono {              /* data, step counters, codes */
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.4;
  font-weight: 500;
  letter-spacing: 0;
  font-feature-settings: "tnum" 1;
}
.t-step {              /* big "01" step numeral */
  font-family: var(--font-sans);
  font-size: 56px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--fg1);
}

code, kbd, samp { font-family: var(--font-mono); }