/* ─────────────────────────────────────────────────────────────
   SYSTEEMS · Design Tokens
   Colors + typography for the SYSTEEMS brand.
   Dark-mode native. Forest-green accent. Terminal-adjacent.
   ───────────────────────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Source+Code+Pro:wght@400;500&display=swap');

:root {
  /* ── Surfaces ── */
  --bg:            #070f09;                   /* page canvas — deep forest-black */
  --bg-deep:       #060e08;                   /* button bg, deepest surface */
  --surface:       #0a1a0c;                   /* cards, elevated */
  --surface-2:     #0e2214;                   /* inset / deeper panels */
  --surface-glass: rgba(10, 26, 12, 0.84);    /* translucent nav, overlays */

  /* ── Borders — depth lives here, not in shadows ── */
  --border-subtle: #112618;                   /* hairlines, barely visible */
  --border:        #1a3d2b;                   /* default card + divider */
  --border-strong: #245c3e;                   /* hover, prominent */
  --border-green:  rgba(62, 207, 106, 0.30);  /* brand-highlight edge */

  /* ── Brand green scale ── */
  --green:         #3ecf6a;                   /* PRIMARY brand accent */
  --green-bright:  #4fd97a;                   /* hover on brand */
  --green-link:    #2ab558;                   /* link variant */
  --green-dim:     #1e5430;                   /* dim loop, backing green */
  --green-mid:     #245c3e;                   /* mid-tone accents */
  --green-muted:   #7ab892;                   /* muted green text */
  --green-faint:   #c8e8d4;                   /* very light green */
  --green-glow:    rgba(62, 207, 106, 0.18);  /* glow / halo fills */
  --green-wash:    rgba(62, 207, 106, 0.04);  /* faintest green wash */

  /* ── Text ── */
  --fg:            #f5f9f6;                   /* primary — near white, faintly green */
  --fg-2:          #b4c5ba;                   /* secondary body */
  --fg-muted:      #6a8a76;                   /* muted, footer, labels */
  --fg-dim:        #4a6a56;                   /* tertiary, "no" markers */

  /* ── Semantic aliases ── */
  --text:          var(--fg);
  --text-2:        var(--fg-2);
  --text-muted:    var(--fg-muted);
  --text-dim:      var(--fg-dim);
  --accent:        var(--green);
  --link:          var(--green-link);

  /* ── Fonts ── */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-mono: 'Source Code Pro', 'Menlo', 'SF Mono', monospace;

  /* ── Radii ── */
  --r-sm:   6px;      /* small controls, ghost btns */
  --r-md:   10px;     /* mid panels, small cards */
  --r-lg:   12px;     /* default card */
  --r-xl:   16px;     /* feature cards, large containers */
  --r-pill: 9999px;   /* primary CTAs, badges, tabs */

  /* ── Spacing (8px base) ── */
  --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;
  --s-10: 128px;

  /* ── Elevation — SYSTEEMS avoids shadows; borders carry weight.
         Focus rings are the one exception. ── */
  --focus-ring:    0 0 0 3px rgba(62, 207, 106, 0.25);
  --shadow-lift:   0 4px 12px rgba(0, 0, 0, 0.35);

  /* ── Motion ── */
  --ease-out:   cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:   0.15s;
  --dur-mid:    0.25s;
  --dur-slow:   0.5s;
}

/* ─────────────────────────────────────────────────────────────
   TYPOGRAPHY — semantic tokens
   ───────────────────────────────────────────────────────────── */

html, body {
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01", "cv11";
}

/* Display — hero headlines. Tight leading is the signature move. */
.t-display,
h1 {
  font-family: var(--font-sans);
  font-size: clamp(52px, 6.8vw, 88px);
  font-weight: 400;
  line-height: 1.00;
  letter-spacing: -0.025em;
  color: var(--fg);
}

/* Section heading */
.t-section,
h2 {
  font-family: var(--font-sans);
  font-size: clamp(32px, 3.2vw, 40px);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--fg);
}

/* Card / sub-section title */
.t-h3,
h3 {
  font-family: var(--font-sans);
  font-size: 24px;
  font-weight: 400;
  line-height: 1.33;
  letter-spacing: -0.01em;
  color: var(--fg);
}

/* Prominent sub-heading inside cards */
.t-h4,
h4 {
  font-family: var(--font-sans);
  font-size: 22px;
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--fg);
}

/* Lead / sub copy */
.t-sub {
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.56;
  color: var(--fg-2);
}

/* Body */
.t-body,
p {
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--fg-2);
}

/* Small body */
.t-small {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--fg-muted);
}

/* Caption */
.t-caption {
  font-size: 12px;
  font-weight: 400;
  line-height: 1.33;
  color: var(--fg-muted);
}

/* Mono — the "developer console" voice. Uppercase, wide-tracked. */
.t-mono,
code,
kbd,
samp {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.33;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--green);
}

/* Mono body (lowercase, looser) — for API values, inline code */
.t-mono-body {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--fg-2);
}

/* Nav + button type scale — weight 500 is reserved for interactive */
.t-nav,
.t-button {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.14;
  letter-spacing: normal;
  color: var(--fg);
}

/* Accent — brand green inline */
.accent { color: var(--green); }
.muted  { color: var(--fg-muted); }
.dim    { color: var(--fg-dim); }

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--green-link); }

/* Selection */
::selection { background: var(--green); color: var(--bg-deep); }